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

重慶崽兒brand發表於2018-08-21

原文釋出在我的個人部落格上,歡迎訪問:原文連結

開局先看一張圖

before_css.png

::: 當你滑鼠右鍵檢視你的網站原始碼,不知道看到這樣的一堆程式碼你內心有何感受呢?作為有強迫症的我看著真是渾身難受。。。為什麼這些樣式不會被單獨打包到一個檔案中而要全部在頁面中中呢。。。。

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

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

先來看看優化後的程式碼

after_css.png

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

 build: {
    
    extractCSS: { allChunks: true }
}
複製程式碼

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

對了有一點很重要

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

感謝您的閱讀!

相關文章