性能分析
1. 统计基本信息
使用webpack内置的stats
可以统计出构建时间、构建资源清单及资源大小等信息
使用方法:
1. cli
webpack --env production --json > stats.json
2. node API
webpack(config, (err, stats) => {
console.log(stats);
});
2. 速度分析
使用speek-measure-webpack-plugin
插件功能
- 分析出整个构建时间和每个loader和plugin的构建时间
- 时间过长的标红,较长的标黄
插件使用:包裹webpack的配置
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasurePlugin();
const webpackConfig = smp({
// webpack配置
});
3. 体积分析
使用webpack-bundle-analyzer
以可视化形式展示打包依赖模块的体积。
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin()
]
};
构建完成后会启动本地服务,serve 8888端口,浏览器中访问就能看到分析结果。
提升构建速度
使用高版本的webpack和nodejs
高版本的webpack和nodejs构建速度更快
webpack4优化原因:
- v8带来的优化(for of 代替forEach,Map、Set代替Object、includes代替indexOf)
- 默认使用更快的md4 hash算法
- webpack AST可以直接从loader传递给AST,减少解析时间
- 使用字符串方法代替正则
多进程多实例构建
资源并行解析可选方案
- HappyPack
作者已经不维护,建议使用webpack官方提供的"thread-loader" - thread-loader
{
test: /.js$/,
user: [
{
loader: 'thread-loader',
options: {
workers: 3
}
},
'babel-loader'
]
}
- parallel-webpack
多进程多实例并行压缩
1. 方法一,使用parallel-uglify-plugin插件
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
module.exports = {
plugins: [
new ParallelUglifyPlugin({
// ...
})
]
};