可视化分析包的内容

webpack-bundle-analyzer 扫描 bundle 并构建其内部内容的可视化。使用此可视化来查找大的或不必要的依赖项。

步骤一：安装 webpack-bundle-analyzer

npm install webpack-bundle-analyzer --save-dev

步骤二：配置

// 分析包内容
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  plugins: [
    // 开启 BundleAnalyzerPlugin
    new BundleAnalyzerPlugin(),
  ],
};
本地代码运行npm run build即可在浏览器中自动打开统计信息结果页面

一般运行在生产版本中，该插件将在浏览器中打开统计信息结果页面。

 

 

注意：webpack4 在 production 环境下默认启动了 ModuleConcatenationPlugin （预编译所有模块到一个闭包中，提升代码在浏览器中的执行速度），它可能会合并webpack-bundle-analyzer 输出中的模块的一部分，从而使报告不太详细。 如果你使用此插件，请在分析过程中将其禁用。设置如下：

module.exports = {
  optimization: {
    concatenateModules: false,
  }
};

具体来说，使用 webpack-bundle-analyzer 能可视化的反映：

• 打包出的文件中都包含了什么；
• 每个文件的尺寸在总体中的占比，哪些文件尺寸大，思考一下，为什么那么大，是否有替换方案，是否使用了它包含的所有代码；
• 模块之间的包含关系；
• 是否有重复的依赖项，是否存在一个库在多个文件中重复？ 或者捆绑包中是否具有同一库的多个版本？
• 是否有相似的依赖库， 尝试使用一种依赖库实现相似的功能。
• 每个文件的压缩后的大小。