webpack學習(四) -- css tree shaking

css tree shaking

咱們和webpack(三)同樣，用案例說話

安裝css須要的兩個loader，css-loader 和style-loader

npm install css-loader style-loader -D
複製代碼

在項目webpack.config.js配置文件中配置

在html文件中寫一些結構

建立css文件，在裏面寫一些頁面中有的和沒有的css樣式，沒有的用來驗證css抖動

在入口文件index.js中將依賴的css文件引入

執行npm run dev

css樣式被打包到出口文件中，能夠看到在打包好的文件裏搜索background-color可以搜到

兩個插件

mini-css-extract-plugin

單獨將css代碼抽離成能打包的文件的插件

• 下載

npm install --save-dev mini-css-extract-plugin
複製代碼

• 在配置文件中引入

• 在當前開發環境下載局部webpack

下載方式見webpack學習(一)

• 執行npm run dev,會發現dist文件夾中多出main.css文件

• 在index.html文件中引入打包後的css文件

• 在main.js中搜索background-color，發現沒搜到，是由於咱們已經給樣式單獨打包出css文件了，js文件裏就沒有行內樣式了

*注：單獨抽離css樣式和把css解析成行內樣式兩者不可兼得，勢不兩立

到這爲止這個插件已經實現了將css樣式單獨抽離出文件的目的啦，接下來看下一個插件，把css文件也抖一下

purifycss-webpack

支持css tree shaking的插件

• 下載

npm i -D purifycss-webpack purify-css
複製代碼

• 原理

將html裏的dom結構與css裏的樣式進行匹配，若匹配成功則不進行抖動，固然要根據哪一個文件進行抖，是須要咱們手動配置規定的

• 配置方法(先只根據一個Html進行抖動)

下圖是隻根據當前路徑下的全部html文件進行抖動

css抖動必定要放在js以前，不然會報錯。

• 引入node的一些公共變量

• 執行npm run dev,再看main.css中發現沒有用到的都被抖掉了

上述只是dom和css能匹配的狀況，那麼若是咱們在js裏動態插入dom結構，這個插件還會好使嗎？

• js中插入dom

• 執行npm run dev，發現a標籤仍是被抖掉了，沒有留下來，是由於咱們在配置文件中設置的是與html對比，並無配置與js文件對比

若是想要匹配js，就能夠在配置文件上再加上一條

這時候須要注意的是，咱們要用到全局匹配，所以在引入glob時就須要引入glob-all,下載glob-all並引入

• 執行npm run dev,a就不會被抖掉了

以上兩個插件幫助咱們把css代碼作了優化，但須要注意的是，咱們寫在dom裏的到是被註釋掉的dom結構，是不會被抖掉的哦，因此上線前，把註釋的代碼清空，也會提高性能哦~

結尾

webpack的學習還在繼續~文章也會持續更新哦~若個人文章裏有錯誤或問題，請及時聯繫我，v:lin2537421241