nuxt.js抽去css文件css代码过多不利于seo

2021-02-02 09:42:14

参考地址 nuxt.js 关于页面中css 提取到 link的方法

build.extractCSS.allChunks has no effect from v2.0.0. Please use build.optimization.splitChunks settings instead.


nuxt.js 关于页面中css 提取到 link的方法

说明：

关于nuxt.js的资料并不是很多，有时候遇到个很简单的问题，百度或者谷歌都不是很容易找到。

其实这个问题就很简单，但是也让我浪费了很多时间，所以在此共勉。

正题：

下面这张图片就是提取之后的样子，所有css 都放到了/nuxt/app.XXX.css中了。

这里写图片描述

功能实现：

只有一个步骤
只有一个步骤
只有一个步骤

重要的事情说三遍，那就是在nuxt.config.js下的build里添加 extractCSS: { allChunks: true }这句话。稍后具体说明；

这里写图片描述

有的盆友会发现，npm run dev 后没有任何变化，不要着急，试下npm run build; npm start;这样一定成功了吧；（只有生产环境下有效）

原理

在文档中有提到webpack的配（https://github.com/nuxt/nuxt.js/tree/master/lib/builder/webpack）；

打开连接你会发现，有这样两个js：“base.config.js”，“style-loader.js”；

这里写图片描述

这里写图片描述

其实nuxt.js 自己本身已经集成了extract-text-webpack-plugin这个插件；
只是extractCSS默认为false；

具体代码比较简单就不解释了；


  • 精彩推荐

  • 2020-05-20 22:29:05

    javascript中为何在匿名function函数后面还外加

    它可以解释成为“匿名函数自调用”，也就是说，定义一个匿名函数，然后马上调用它（因为它是匿名的，如果不立即调用就获取不到该函数的引用了）。通常它被应用在一些大型的JS框架中（如上面所说的），因为这个匿名函数的函数体相当于提供一个匿名的名字空间，这样就不会再与用户自定义的JS函数、变量、对象发生冲突了。尽管JS没有显示地提供命名空间的定义和使用机制，但这种匿名方式却不失为是一种很好的解决命名空间问题的方法。

  • 2020-05-20 22:30:14

    js中利用prototype给类添加方法

    你可能会想，这不就是个简单的函数声明？没错，这个函数就是一个类的定义的实现。如何使用这个类呢？看下面的代码：var cls1 = new MyClass(); 这样，利用new就可以生成MyClass的一个实例了。所以在js中可以说函数就是类，类就是函数。

  • 2020-05-21 10:56:53

    fixed z-index失效

    作为一个假的前端，在调试一个页面时出现了如下bug。 左侧的菜单固定为fixed时，二级菜单无法设置有效的z-index，导致菜单隐藏在页面元素之下，明明页面元素的z-index是1，但是无论把菜单的z-index设置为多大，都不管用。