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；

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


  • 精彩推荐

  • 2018-11-01 22:08:19

    Android Toolbar左、中、右对齐

    默认的Android Toolbar中添加子元素view是从左到右依次添加。需要注意的是，Android Toolbar为自身的NavigationIcon（app:navigationIcon）最靠右，Logo（app:logo）紧接NavigationIcon、Title（app:title）接续Logo、保留了默认的位置（从左边到右）。这些Android Toolbar保留的系统设置字段将挤压开发者自己安放在Toolbar中的子view，如图所示：

  • 2018-11-06 06:42:59

    XUtils3框架数据库的基本使用方法

    今天给大家带来数据库模块的讲解，现在主流的ORM框架很多，比如OrmLite,GreenDao,Active Android,Realm等等，这些框架每个都有自己的优点和缺点，大家完全可以根据自己项目的实际需求进行选择，下面开始进入今天的数据库模块的介绍。