监控和分析应用

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

伊万·阿库洛夫
Ivan Akulov
Twitter GitHub 首页

即使您将 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());

请放心使用数字面板查找可以改进的地方！例如，滚动浏览 Modules 部分以查找哪些库太大并且可以替换为更小的替代库。

bundlesize [套装大小]

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

GitHub 上拉取请求的 CI 部分的屏幕截图。CI 工具中包括 Bundlesize 输出

如需对其进行配置，请按以下步骤操作：

了解最大尺寸

  1. 优化应用以尽可能缩减大小。运行正式版 build。

  2. 将包含以下内容的 bundlesize 部分添加到 package.json 中：

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

  3. 使用 npx 执行 bundlesize：

    npx bundlesize

    这会输出每个文件的 Gzip 压缩后大小：

    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 输出的屏幕截图。部分构建结果标记为“失败”

深入阅读

分析软件包如此大的原因

您可能想要更深入地了解捆绑包，看看哪些模块在其中占用了空间。不妨使用 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该插件会在浏览器中打开统计数据页面。

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

以下是应留意报告中的哪些内容：

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

另外，请参阅 Sean Larkin 对 webpack 软件包的精彩分析。

总结

  • 使用 webpack-dashboard 和 bundlesize 随时关注应用的大小
  • 通过 webpack-bundle-analyzer 深入了解哪些因素可以增加规模