3. 打包体积分析

同样，优化打包体积，也需要先分析各个 bundle 文件的占比大小，来进行针对优化。

使用 webpack-bundle-analyzer 查看打包后生成的 bundle 体积分析，将 bundle 内容展示为一个便捷的、交互式、可缩放的树状图形式。帮助我们分析输出结果来检查模块在何处结束。

安装：

npm i -D webpack-bundle-analyzer

webpack-pord.js 配置如下

// 引入
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  plugins: [
    // 打包体积分析
    new BundleAnalyzerPlugin()
  ],
}

包含各个 bundle 的体积分析，效果如下：