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;

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


  • 2019-02-24 09:47:09

    解决Node.js的命令行输出中文乱码问题(也适用于Electron)

    ​一般我们的js文件都是试用utf8编码保存的,但是中文windows的命令行一般默认使用cp936编码(就是gbk),这样我们用js代码 console.log('中文');输出日志的时候,会发现输出的是乱码。 网上有提供一些解决方案,典型的就是用iconv或iconv-lite,把这些中文字符串先转成gbk再输出。 但是这个方案我试了多次,在win10的命令行下,utf8的字符串是成功转成了gbk字符串了(通过打印Buffer可以见到),但是输出还是乱码。

  • 2019-02-25 10:05:41

    Android Socket连接(模拟心跳包,断线重连,发送数据等)

    因为是要保证全局只能有一个连接,而且我们还需要在不同的Activity中发指令,因此肯定不能在需要发指令的界面中都去连接socket,这样一来不好管理,性能也不好,重复代码也会比较多,所以想了一下还是把socket放到service中比较好,发指令功能都放在service中即可。

  • 2019-02-28 15:54:24

    HTTP协议缓存策略深入详解之ETAG妙用

      HTTP协议规格说明定义ETag为“被请求变量的实体值” 。另一种说法是,ETag是一个可以与Web资源关联的记号(token)。典型的Web资源可以一个Web页,但也可能是JSON或XML文档。服务器单独负责判断记号是什么及其含义,并在HTTP响应头中将其传送到客户端。

  • 2019-02-28 16:46:26

    android获取视频、图片时添加防盗链

    使用HTTP协议时,可以利用头信息中的Referer做防盗链。 我们在一些网站的网页里访问图片的时候,在图片本站是可以正常看到的,但在外头就不能看到了,这是因为在http的header信息中的referer元素。

  • 2019-03-02 11:29:17

    MySQL学习之索引顺序

    这个问题比较简单,MySQL本身会对条件和索引进行判断,这样写可以用到索引,没有问题。