image.png
工作原理？
分析在compiler.plugin('done',function(stats)) 时传入参数Stats的实例，然后通过对实例调用toJson()方法转成json文件，它是webpack 的一个统计类Stats 的实例，然后通过对实例的调用toJson() 方法转成json文件，再从中提取chunks各个包的大小信息，最后在Canvas中进行画图，通过该图开发者能快速意识到那些模块异常的大，然后找到原因优化
步骤如下：
1. 安装：npm install webpack-bundle-analyzer --save-dev
2. webpack.config.js:
// 分析包内容
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
// 开启 BundleAnalyzerPlugin
new BundleAnalyzerPlugin(),
],
};
3.运行 npm run build
vue
1.安装 npm install webpack-bundle-analyzer --save-dev
3.vue.config.js配置
module.exports = {
chainWebpack: config => {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}
}
3.运行 npm run serve
