oracle minipack,webpack2-minifying（压缩代码）

今天学习的是压缩代码章节，原文链接：webpack2

启用性能预算(Performance Budget)限制构建出的bundle大小。

在 webpack.config.js 中配置

const productionConfig = merge([

{

performance: {

hints: 'warning', // 'error' or false are valid too

maxEntrypointSize: 100000, // in bytes

maxAssetSize: 450000, // in bytes

},

},

...

]);

上述配置限制了bundles的entry和asset的文件大小，如果超过设置值，构建将报错并取消build过程，否则报错不会出现并且build成功。

压缩Javascript.

压缩代码的目的是将代码体积变小一些。压缩代码的靠谱方式就是重写的同时不会导致代码(功能)失效，好的方式比如：对变量重命名和删除无效代码段。

我么可以使用webpack -p 即 --optimize-minimize 来压缩代码，这个命令的底层调用的 UglifyJsPlugin 插件，由于_UglifyJS _不支持ES6语法，针对浏览器使用 _Babel _ 和 babel-preset-env 的情况下还是会出问题，因此我们需要另辟蹊径了。

babili是由_babel_团队维护的一个压缩器(minifier)--支持ES6甚至更新的特性，在webpack中我们可以通过 babili-webpack-plugin来运用该工具。

npm下载该插件

npm install babili-webpack-plugin --save-dev

在_webpack.parts.js_中定义该插件使用

const BabiliPlugin = require('babili-webpack-plugin');

...

exports.minifyJavaScript = () => ({

plugins: [

new BabiliPlugin(),

],

});

该插件功能强大，但是我们只需要能切换source map就足够了。接下来我们在_webpack.config.js_中应用上面的插件定义：

const productionConfig = merge([

...

parts.clean(PATHS.build),

parts.minifyJavaScript(),

...

]);

鉴于该插件的使用导致了更多的工作，所以构建时间更长，但是好处是明显的：性能预算中的超出size大小的限制取消了，并且构建出的bundle体积减小了许多。更过设置可以参考_babili-webpack-plugin_ 和Babili 官方文档，其中包含注释代码的配置项。

压缩CSS.

_css-loader_可以通过cssnano来压缩代码，前提是你必须明确的配置 minimize 参数(options) 你也可以在query后面加上 _cssnano特定参数_来定制化更过功能。

_ optimize-css-assets-webpack-plugin_能够分组压缩css代码，并且可以消除_ExtractTextPlugin _导致的重复性的css代码。

其中_ optimize-css-assets-webpack-plugin_是这几个里面的最好方案。首先下载该插件：

npm install optimize-css-assets-webpack-plugin cssnano --save-dev

在_webpack.parts.js_中定义该插件的配置：

...

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

const cssnano = require('cssnano');

...

exports.minifyCSS = ({ options }) => ({

plugins: [

new OptimizeCSSAssetsPlugin({

cssProcessor: cssnano,

cssProcessorOptions: options,

canPrint: false,

}),

],

});

在_webpack.config.js_中使用该插件的定义：

const productionConfig = merge([

...

parts.minifyJavaScript(),

parts.minifyCSS({

options: {

discardComments: {

removeAll: true,

},

// Run cssnano in safe mode to avoid

// potentially unsafe transformations.

safe: true,

},

}),

...

]);

跑一下npm run build，css体积变小了