监控和分析应用

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

Ivan Akulov

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

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

跟踪软件包大小

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

webpack-dashboard

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

webpack-dashboard 输出的屏幕截图

此信息中心有助于跟踪大型依赖项 - 如果您添加了大型依赖项，就会立即在模块部分看到它！

如需启用它，请安装 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 部分的屏幕截图。在以下地点之间： 还有 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 输出的屏幕截图。所有作品 条结果标有“通过”

或者，如果失败，则执行以下操作：

bundlesize 输出的屏幕截图。某些 build 结果被标记为“失败”

深入阅读

分析软件包大小过大的原因

您可能需要深入了解该 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(),
  ],
};

然后运行正式版该插件会在浏览器中打开统计信息页面。

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

您应在报告中查看以下内容：

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

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

总结

  • 使用 webpack-dashboard 和 bundlesize 随时掌握应用的大小
  • 通过 webpack-bundle-analyzer 深入了解哪些因素能够增加规模