將Nuxt.js搭建的網站中css樣式提取到一個css文件中

我的個人博客:原文戳這裏

開局先看一張圖

::: hljs-center

before_css.png

:::
當你鼠標右鍵查看你的網站源碼,不知道看到這樣的一堆代碼你內心有何感受呢?作爲有強迫症的我看着真是渾身難受。。。爲什麼這些樣式不會被單獨打包到一個文件中而要全部在頁面中中呢。。。。

經過一番搜索,終於找到了解決的方法

網上好像這類資料真的比較少(可能是我找的姿勢不對)原文鏈接

先來看看優化後的代碼
::: hljs-center

after_css.png

:::
是不是頓時就簡潔了很多??哈哈,
其實很簡單,只需要在nuxt.config.js中加一行代碼就好啦,加在build下面

 build: {

    extractCSS: { allChunks: true }
}

是不是很簡單呢?用百度站長工具抓取測試了下,優化過後抓取的速度快樂很多很多(新手不太懂,可能多有利於你網站的seo吧。。)

對了有一點很重要

也許你添加代碼之後,運行npm run dev後發現並沒有什麼效果????你可能會說這代碼沒用??
那你試試npm run build && npm run start後在看看呢?是不是成功了呢???(這代碼只在生產環境有效哦)

感謝您的閱讀!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章