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-12-20 13:24:58

    瓦片地图生成使用以及原理

    我们都知道地球是圆的,电脑显示器是平的,要想让位于球面的形状显示在平面的显示器上就必然需要一个转换过程,这个过程就叫做投影(Projection)。在地球上我们通过经纬度来描述某个位置,而经过投影之后的地图也有自己的坐标系统,本篇文章就来详细介绍在百度地图API中涉及的各种坐标体系。

  • 2019-12-20 13:27:16

    腾讯地图谷歌和高德地图等自定义地图区别

    腾讯、百度、Google的地图投影均采用Web Mercator 投影坐标系;腾讯与Google的地图瓦片分辨率及切片范围是完全相同的,仅仅是命名规则稍有不同,这就使得同一位置和缩放级别的地图瓦片是完全可以重叠的;而百度地图每个缩放级别分辨率与前两者均不相同,而且地图瓦片的坐标原点做了一定的偏移,导致百度地图与前两者的瓦片是无法重叠的,这是因为百度在GCJ-02的基础上又进行了加密处理,形成了百度独有的BD-09坐标系。

  • 2019-12-22 08:06:48

    如何快速撤销上一次的commit

    在平时工作中使用git难免会提交一些错误的文件到git库里,这时候,撤销吧,怕把正确的文件删除了,不撤销重新改又很麻烦,下面,我就从提交的三个阶段,来讲解如何撤销错误的操作。

  • 2019-12-23 14:54:03

    RPC, REST ,GraphQL区别比较优劣

    其实在使用和学习的过程中,有很多文章都对比过它们的异同,但是大部分文章并没有从一个相对客观的角度来对比,更多是为了突显一个的优点而刻意指出另外一个的缺点。这让我想到一句话,脱离业务情景谈技术就是耍流氓。

  • 2019-12-23 23:38:59

    vue-apollo的多客户端的用法

    vue-apollo的多客户端的用法以及apollo.js的配置 关于如何安装和如何使用,这篇文章就先暂时不介绍了,如果不清楚就看我另一篇关于vue-apollo的用法 在做项目中,有时候后端的接口是按模块功能去划分的,那么请求的地址就会不同,关于vue-apollo的多客户端配置如下