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；

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


  • 精彩推荐

  • 2017-04-03 14:23:17

    Android Studio --“Cannot resolve symbol” 解决办法

    Android Studio 无法识别同一个 package 里的其他类，将其显示为红色，但是 compile 没有问题。鼠标放上去后显示 “Cannot resolve symbol XXX”，重启 Android Studio，重新 sync gradle，Clean build 都没有用。

  • 2017-04-06 14:59:13

    PHP配置文件详解

    PHP是一个简单易学，功能强大的语言，尤其在Web开发，开发效率高，方便快捷。研究一下php.ini了解PHP相关配置会有好处的，对PHP有更加深入的了解。

  • 2017-04-06 15:00:46

    怎么实时查看mysql当前连接数

    今天有一台mysql服务器突然连接数暴增，并且等待进程全部被锁...因为问题解决不当，导致被骂...OTL 总结：以后要快速定位错误，布置解决方案

  • 2017-04-06 15:07:57

    PHP-FPM不完全指南

    fpm启动后会先读php.ini，然后再读相应的conf配置文件，conf配置可以覆盖php.ini的配置。 启动fpm之后，会创建一个master进程，监听9000端口（可配置），master进程又会根据fpm.conf/www.conf去创建若干子进程，子进程用于处理实际的业务。

  • 2017-04-06 15:11:03

    浅析php-fpm 和 mysql 之间的关系详解

    php-fpm 和 mysql 之间的关系估计不做底层开发应用的是不会去考虑分析它们了，如果是的话我们来看一篇关于php-fpm 和 mysql 之间的关系的教程。

  • 2017-04-06 15:15:16

    PHP-FPM配置及使用总结

    PHP-FPM配置及使用总结： PHP-FPM是一个PHP FastCGI的管理器，它实际上就是PHP源代码的补丁，旨在将FastCGI进程管理引进到PHP软件包中，我们必须将其patch到PHP源代码中，然后再行编译才能使用。而现在我们可以在PHP 5.3.2及更新版本中直接开启并使用即可，因为PHP从该版本已经将其收入到软件包中，所以其不再是补丁包的存在了。