监控和分析应用

应使用哪些工具跟踪和分析 webpack 软件包

Ivan Akulov

即使您配置 webpack 以尽可能缩减应用大小，也仍需要跟踪 webpack 并了解其包含的内容。否则，您可以安装一个会使应用大小翻倍的依赖项，而您甚至都不会注意到！

本部分介绍了有助于您了解软件包的工具。

跟踪软件包大小

如需监控应用大小，请在开发期间使用 webpack-dashboard，在 CI 上使用 bundlesize。

webpack-dashboard

webpack-dashboard 通过依赖项大小、进度和其他详细信息增强了 webpack 输出。如下所示：

webpack-dashboard 输出的屏幕截图

此信息中心有助于跟踪大型依赖项，如果您添加了一个，它会立即显示在 Modules 部分！

如需启用它，请安装 webpack-dashboard 软件包：

npm install webpack-dashboard --save-dev

并将该插件添加到配置的 plugins 部分：

// webpack.config.js
const DashboardPlugin = require('webpack-dashboard/plugin');

module.exports = {
    plugins: [
    new DashboardPlugin(),
    ],
};

或者，如果您使用的是基于 Express 的开发服务器，请使用 compiler.apply()：

compiler.apply(new DashboardPlugin());

您可以随意使用数字面板，找出可能需要改进的地方！例如，滚动浏览模块部分，找出哪些库太大，可以替换为体积较小的替代库。

bundlesize

bundlesize 用于验证 webpack 资源是否不超过指定的大小。将其与 CI 集成，以便在应用变得过大时收到通知：

GitHub 上拉取请求的 CI 部分的屏幕截图。在 CI 工具中，有一个 Bundlesize 输出

如需对其进行配置，请执行以下操作：

了解最大尺寸

  1. 优化应用，使其尽可能小。运行生产 build。

  2. 将 bundlesize 部分连同以下内容添加到 package.json：

    // package.json
{
  "bundlesize": [
    {
      "path": "./dist/*"
    }
  ]
}

  3. 使用 npx 执行 bundlesize：

    npx bundlesize

    这将输出每个文件的压缩大小：

    PASS  ./dist/icon256.6168aaac8461862eab7a.png: 10.89KB
PASS  ./dist/icon512.c3e073a4100bd0c28a86.png: 13.1KB
PASS  ./dist/main.0c8b617dfc40c2827ae3.js: 16.28KB
PASS  ./dist/vendor.ff9f7ea865884e6a84c8.js: 31.49KB

  4. 将每个尺寸增加 10-20%，即可得出最大尺寸。这 10-20% 的余量可让您照常开发应用，并在应用大小过大时向您发出警告。

    启用 bundlesize

  5. 将 bundlesize 软件包作为开发依赖项进行安装：

    npm install bundlesize --save-dev

  6. 在 package.json 的 bundlesize 部分中，指定具体的大小上限。对于某些文件（例如图片），您可能需要指定每个文件类型的大小上限，而不是每个文件的大小上限：

    // package.json
{
  "bundlesize": [
    {
      "path": "./dist/*.png",
      "maxSize": "16 kB",
    },
    {
      "path": "./dist/main.*.js",
      "maxSize": "20 kB",
    },
    {
      "path": "./dist/vendor.*.js",
      "maxSize": "35 kB",
    }
  ]
}

  7. 添加 npm 脚本以运行检查：

    // package.json
{
  "scripts": {
    "check-size": "bundlesize"
  }
}

  8. 将 CI 配置为在每次推送时执行 npm run check-size。（如果您要在 GitHub 上开发项目，请将 bundlesize 与 GitHub 集成。）

这样就搞定啦！现在，如果您运行 npm run check-size 或推送代码，您会看到输出文件是否足够小：

bundlesize 输出的屏幕截图。所有 build 结果均标记为“通过”

或者，如果发生失败，请执行以下操作：

bundlesize 输出的屏幕截图。有些构建结果会标有“失败”

深入阅读

分析 app bundle 这么大的原因

您可能需要深入研究该软件包，看看哪些模块占用了其中的空间。欢迎使用 webpack-bundle-analyzer：

（来自 github.com/webpack-contrib/webpack-bundle-analyzer 的屏幕录制内容）

webpack-bundle-analyzer 扫描软件包并构建其内部内容的可视化。您可以使用此可视化图表查找大型或不必要的依赖项。

如需使用该分析器，请安装 webpack-bundle-analyzer 软件包：

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

向 webpack 配置添加插件：

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin(),
  ],
};

并运行生产 build。该插件会在浏览器中打开统计信息页面。

默认情况下，统计信息页面会显示已解析文件（即 bundle 中显示的文件）的大小。您可能需要比较 gzip 大小，因为它更接近真实用户的体验；请使用左侧边栏切换大小。

应留意该报告中的哪些内容：

  • 大型依赖项。为什么它们那么大？是否有体积较小的替代方案（例如而不是 React）？您是否使用了该库包含的所有代码（例如Moment.js 包含许多不常使用且可以舍弃的语言区域？
  • 重复的依赖项。您是否发现多个文件中重复出现了同一个库？（例如，在 webpack 4 中使用 optimization.splitChunks.chunks 选项，或在 webpack 3 中使用 CommonsChunkPlugin 将其移至常规文件中。）或者，软件包中是否包含同一库的多个版本？
  • 类似的依赖项。是否有类似的库可执行大致相同的任务？（例如 moment 和 date-fns，或 lodash 和 lodash-es）。请尝试使用单个工具。

此外，还可以查看 Sean Larkin 对 webpack 软件包的出色分析。

总结

  • 使用 webpack-dashboard 和 bundlesize 及时了解应用的大小
  • 深入了解 webpack-bundle-analyzer 的大小构成