监控和分析应用

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

Ivan Akulov

即使您配置 Webpack 以尽可能缩减应用的大小，也应确保 及其包含的内容否则，您可以安装一个依赖项， 甚至不会注意到！

本部分介绍了一些工具，可帮助您了解自己的软件包。

跟踪软件包大小

如需监控应用大小，请使用 在开发过程中使用 webpack-dashboard 在持续集成环境中运行 bundlesize。

webpack-dashboard

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

webpack 信息中心输出的屏幕截图

此信息中心有助于跟踪大型依赖项 - 添加后，您会立即在 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 验证 webpack 资源是否不超过 指定的尺寸将其与 CI 集成，以便在应用变得过大时收到通知：

GitHub 上拉取请求的 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 输出的屏幕截图。部分作品 条结果标记为“失败”

深入阅读

分析 app bundle 这么大的原因

您可能需要深入了解该 bundle，看看哪些模块会占用空间。Meet webpack-bundle-analyzer:

<ph type="x-smartling-placeholder">
</ph>
（来自 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 大小，因为两者更接近真实用户的 体验；请使用左侧边栏切换大小

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

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

另外，您还可以查看 Sean Larkin 对 Webpack 的精彩分析 软件包。

汇总

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