今天学习的是压缩代码章节,原文链接: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体积变小了