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

开局先看一张图

before_css.png

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

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

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

先来看看优化后的代码

after_css.png

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

 build: {
    
    extractCSS: { allChunks: true }
}

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

对了有一点很重要

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

感谢您的阅读!

文章归类于: 码不停蹄

文章标签: #Vue#项目#前端

版权声明: 自由转载-署名-非商用

0条评论

提示:

评论会在审核通过后显示在下方

昵称必填,用于展示在评论中

邮箱必填,不会公开展示,方便及时收到回复

网址选填,方便看到的人去访问,请完整填写,例如(http://www.brandhuang.com)

快来抢个沙发吧