使用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打包優化須要不斷的去理解插件的做用以及形成的影響，不要濫用插件。