使用Webpack對Css文件壓縮處理的思考

問題的起因：

　　使用 bulma.css ，通過webpack打包后樣式出錯，查看壓縮代碼，發現代碼從css的 long hand 屬性被壓縮為 short hand（PS: 什么是long hand & short hand，請查看此文：http://www.hongkiat.com/blog/css-shorthand-longhand-notations/）。

解決過程：

　　經過一番追查判斷（搜 + 思），最終發現問題出在webpack.prod.conf.js（使用vue-cli自動搭建的weppack環境）里, 使用了UglifyJsPlugin 插件進行代碼壓縮，UglifyJsPlugin用於對 js 代碼進行壓縮，可是在 webpack 1.x 版本里，使用 UglifyJsPlugin 插件不僅會壓縮 js 代碼，同樣也會壓縮css代碼，這就造成了一些問題：可能在代碼壓縮過程中，由於使用 UglifyJsPlugin壓縮 css 代碼，可能會發生屬性合並的問題，比如上述 long hand & short hand問題。在我的問題中，主要是由於bulma的 select 樣式中 padding-right 值定義了兩次，后一次值會對前一次進行覆蓋（想想css的名稱“層疊樣式表”），當在npm run build 打包后部署文件時就會出現樣式錯誤的現象，查看壓縮文件，發現padding-left、padding-right、padding-top、padding-bottom屬性已合並為padding，然而padding屬性合成值並不是我們希望的，由於bulma的 select樣式定義了兩次。如圖所示。

 

若想壓縮css文件，則推薦使用optimize-css-assets-webpack-plugin插件配合  cssnano.co 使用，配置代碼可參考如下

( cssnano需提前通過require('cssnano')引入!)

// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.

　var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

new OptimizeCssAssetsPlugin({
    cssProcessorOptions: {  // 引入cssnano后，可在此處配置css壓縮規則
        mergeLonghand: false,
        discardComments: { removeAll: true }
    },
    canPrint: true,
}),

 在網上搜到的UglifyJsPlugin配置插件在webpack 1.x 中打包css的原因所在，建議大家升級成webpack 2.x 版本再使用UglifyJsPlugin。

 

總結：webpack打包優化需要不斷的去理解插件的作用以及造成的影響，不要濫用插件。