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-03-28 10:58:01

    No such property: sonatypeRepo for class:

    这种问题一般是出现在导入一些开源项目的时候。原因为该项目的原作者会把项目发布到maven中央仓库中，所以在gradle中添加了相关的maven发布任务，而发布任务需要配置

  • 2017-04-02 00:42:51

    PHP的pm、pm.max_requests、memory_limit参数优化说明

    pm是来控制php-fpm的工作进程数到底是一次性产生固定不变（static）还是在运行过程中随着需要动态变化（dynamic）。众所周知，工作进程数与服务器性能息息相关，太少则不能及时处理请求，太多则会占用内存过大而拖慢系统。

  • 2017-04-02 00:44:46

    NGINX + PHP-FPM 502 相关事

    NGINX + PHP-FPM 报 502 错误，我想大部分 SA 都遇到过吧。 根据报错的频率，可以分为两种情况，间歇性的502和连续性的502。 这里只讨论第一种情况——间歇性的502。

  • 2017-04-02 00:52:26

    php-fpm占用系统资源分析

    由上图分析，可以看出共有602个进程，其中有601个进程休眠了。这好像有点不对劲，内核进程也就80个左右，加上memcached, nginx, mysqld，也不会超出90个。除了这些，剩下的只有php-fpm管理的php-cgi，难道是…？

  • 2017-04-02 00:56:36

    php-fpm占用系统资源分析

    由上图分析，可以看出共有602个进程，其中有601个进程休眠了。这好像有点不对劲，内核进程也就80个左右，加上memcached, nginx, mysqld，也不会超出90个。除了这些，剩下的只有php-fpm管理的php-cgi，难道是…？

  • 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有更加深入的了解。