使用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打包优化需要不断的去理解插件的作用以及造成的影响，不要滥用插件。