webpack-bundle-analyzer 打包文件分析工具 --- 性能分析

一、安装

npm intall webpack-bundle-analyzer –save-dev

二、配置

在build/webpack.prod.config.js中的module.exports = webpackConfig这句话的上面增加

if (config.build.bundleAnalyzerReport) {
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

三、运行

生产环境查看：npm run build --report，运行后自动打开页面，查看结果

该分析工具的功能：
分析每个打包后的文件------ 比如说，该文件的大小，该文件所包含的内容及其大小，最终为优化提供方向；

参考链接：https://www.cnblogs.com/hss-blog/p/10244315.html