使用 Webpack Bundle Analyzer 分析 JavaScript Bundle

Question

webpack -bundle-analyzer npm 模块 生成一个交互式 图 （不要与 Java 的 TreeMap 给定 Webpack 包的类）。此地图对于查找哪些 npm 包对您的包大小增加最多很有用，因此您可以在尝试修剪包大小时查看关注的位置。

设置

首先，您需要安装 Webpack、webpack-cli 和 webpack-bundle-analyzer：

npm install webpack webpack-cli webpack-bundle-analyzer

接下来，让我们安装 Vue 和 Axios 来组装一个简单的 Vue 应用程序。

npm install vue axios

这是一个 src/index.js 文件创建一个简单的 Vue 应用程序。

const Vue = require('vue');
const axios = require('axios');

const url = 'https://jsonplaceholder.typicode.com/users/1';

const app = new Vue({
  data: () => ({ user: '' }),
  template: `
    <div>
      Hello, {{user}}
    </div>
  `,
  mounted: function() {
    axios.get(url).
      then(res => res.data.name).
      then(user => { this.user = user; }).
      catch(err => console.log(err));
  }
});

运行 bundle 分析器

要运行 bundle 分析器，首先你需要使用 --profile 和 --json 用于导出捆绑分析器所需的原始数据的标志：

$ ./node_modules/.bin/webpack --profile --json > stats.json

stats.json 文件看起来像这样：

$ head stats.json 
{
  "errors": [],
  "warnings": [
    "configuration\nThe 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.\nYou can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/"
  ],
  "version": "4.42.0",
  "hash": "a4433cf21bc97d0be252",
  "time": 269,
  "builtAt": 1583167656248,
  "publicPath": "",
$

接下来，在 stats.json 文件：

$ ./node_modules/.bin/webpack-bundle-analyzer stats.json

Webpack 包分析器将打开一个带有树形图的浏览器窗口：

这是上图的一个例子 。
读取树形图的方法是 node_modules square 包含它下面的所有内容。 所以捆绑的 node_modules 包含 vue/dist 和 axios，大小 vue/dist平方与捆绑的大小成正比，所以你可以看出 vue/dist 比 axios。

而在下面 vue/dist 和 axios/lib/core 是单个文件。Vue 捆绑在一起 vue.runtime.esm.js 文件。 和 axios/lib/core 有几个较小的文件，其中最大的一个是 utils.js。