将Nuxt.js搭建的网站中css样式提取到一个css文件中

发表于 阅读次数：

当你鼠标右键查看你的网站源码，不知道看到一大堆css代码你内心有何感受呢？作为有强迫症的我看着真是浑身难受。。。为什么这些样式不会被单独打包到一个文件中而要全部在页面中中呢。。。

开局先看一张图

before_css.png

当你鼠标右键查看你的网站源码，不知道看到这样的一堆代码你内心有何感受呢？作为有强迫症的我看着真是浑身难受。。。为什么这些样式不会被单独打包到一个文件中而要全部在页面中中呢。。。。

经过一番搜索，终于找到了解决的方法

网上好像这类资料真的比较少（可能是我找的姿势不对）原文链接

先来看看优化后的代码

after_css.png

是不是顿时就简洁了很多？？哈哈，
其实很简单，只需要在nuxt.config.js中加一行代码就好啦,加在build下面

1
2
3
4
 build: {
    
    extractCSS: { allChunks: true }
}

是不是很简单呢？用百度站长工具抓取测试了下，优化过后抓取的速度快乐很多很多（新手不太懂，可能多有利于你网站的seo吧。。）

对了有一点很重要

也许你添加代码之后，运行npm run dev后发现并没有什么效果？？？？你可能会说这代码没用？？
那你试试npm run build && npm run start后在看看呢？是不是成功了呢？？？（这代码只在生产环境有效哦）

感谢您的阅读！