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-11-28 14:53:05

    Vagrant 实战

    Vagrant 是一个可创建轻量级、高复用性和便于移植的开发环境的工具。 此文章是作者折腾vagrant的笔记， 希望大家看后，不再去网上搜罗资料， 能顺利搭建vagrant环境。vagrant更新较快， 还建议大家以官网为主。Vagrant官网

  • 2017-11-28 14:55:13

    使用 Vagrant 打造跨平台开发环境

    Vagrant 是一款用来构建虚拟开发环境的工具，非常适合 php/python/ruby/java 这类语言开发 web 应用，“代码在我机子上运行没有问题”这种说辞将成为历史。

  • 2017-11-28 14:57:19

    vagrant up 失败解决办法

    直接使用VirtualBox开启一个vm也会失败，基本上可以确定是VirtualBox版本的问题 有遇到过安装了VirtualBox-5.0.22-108108-Win.exe的版本在win7下用不了，卸载重装VirtualBox-4.3.12-93733-Win.exe之后可用。

  • 2017-12-05 22:30:02

    php7.0升级php7.2

    看电脑上的教程要备份7.0配置文件以及扩展啥的，我感觉不如卸载干净重新安装

  • 2017-12-06 09:35:10

    分页优化的四种方式

    在大数据量的情况下，原本很简单的分页如果没有处理好，你会发现分页的请求会消耗你大量的数据库时间。如果你遇到了这个问题，文章给了你几个很好的解决的方案。当然，初学者若能看完这篇文章，那么它会指导你写出更具有扩展性的分页代码。