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

我的个人博客：原文戳这里

开局先看一张图

::: hljs-center

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0B3Nomwv-1582801084037)(http://static.brandhuang.com/HiBrand-15348122576590.png)]

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

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

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

先来看看优化后的代码
::: hljs-center

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4fo4radw-1582801084038)(http://static.brandhuang.com/HiBrand-153481244445055.png)]

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

 build: {
    
    extractCSS: { allChunks: true }
}

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

对了有一点很重要

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

感谢您的阅读！

更多内容，微信搜索【九零后重庆崽儿】
点赞关注不要钱，有你的支持更温暖。