Webpack Bundle Analyzer插件的使用

一、原理读取输出文件夹（通常是dist）中的stats.json文件，把该文件可视化展现的插件。便于直观地比较各个bundle文件的大小，以达到优化性能的目的。二、安装> npm install webpack-bundle-analyzer –save-dev三、作为webpack插件使用(1)引入const BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer’).BundleAnalyzerPlugin(2)使用webpackConfig.plugins.push(new BundleAnalyzerPlugin({…}))四、2种方式（1）每次构建时自动打开构建完成之后，浏览器会自动打开localhost:8888,不用改动package.jsonwebpackConfig.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: ‘server’, generateStatsFile: true, statsOptions: { source: false }}))配置参数记得补上，不然构建完不会自动打开～（2）运行特定命令才打开把analyzerMode设置为disabledwebpackConfig.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: ‘disabled’, generateStatsFile: true, statsOptions: { source: false }}))在package.json的scripts字段中加入"bundle-report": “webpack-bundle-analyzer –port 8123 dist/stats.json"其中stat.json文件的位置在打包后的文件夹中，通常是dist，具体情况根据实际情况来定。命令行中键入命令npm run bundle-report浏览器自动打开分析页面:localhost:8123