使用 webpack 进行 Web 性能优化（三）

即使您配置 webpack 以使应用程序尽可能小，跟踪它并知道它包含什么仍然很重要。否则，您可以安装一个使应用程序变大两倍的依赖项——甚至不会注意到它！

本节介绍可帮助您了解anal包的工具。

跟踪包大小

要监控您的应用程序大小，请在开发期间使用 webpack-dashboard 并在 CI 上使用 bundlesize。

webpack-dashboard

webpack-dashboard 通过依赖大小、进度和其他细节来增强 webpack 输出。这是它的外观：

此仪表板有助于跟踪大型依赖项——如果您添加一个，您将立即在“模块”部分看到它！

要启用它，请安装 webpack-dashboard 包：

npm install webpack-dashboard --save-dev

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

// 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 集成，以便在应用程序变得太大时收到通知：

配置:

找出最大尺寸

优化应用程序以使其尽可能小。运行生产构建。

将 bundlesize 部分添加到 package.json 中，内容如下：

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

使用 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

为每个尺寸添加 10-20%，您将获得最大尺寸。这 10-20% 的余量可以让您像往常一样开发应用程序，同时在其大小增长过多时向您发出警告。

开启 bundlesize

安装 bundlesize 包作为开发依赖：

npm install bundlesize --save-dev

在 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",
    }
  ]
}

添加一个 npm 脚本来运行检查：

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

配置 CI 以在每次推送时执行 npm run check-size。（如果你在 GitHub 上开发项目，还可以将 bundlesize 与 GitHub 集成。）

现在，如果您运行 npm run check-size 或推送代码，您将看到输出文件是否足够小：

或者，在失败的情况下：

分析为什么包这么大

您可能想要更深入地研究**包以查看哪些模块占用了其中的空间。认识 webpack-bundle-analyzer?

webpack-bundle-analyzer 扫描包并构建其中内容的可视化。

使用此可视化来查找大的或不必要的依赖项。

要使用分析器，请安装 webpack-bundle-analyzer 包：

npm install webpack-bundle-****yzer --save-dev

在 webpack 配置中添加一个插件：

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

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

然后运行生产构建。该插件将在浏览器中打开统计页面。

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

注意：如果使用 ModuleConcatenationPlugin，它可能会合并 webpack-bundle-analyzer 输出中的部分模块，从而使报告不那么详细。如果您使用此插件，请在分析期间禁用它。
以下是要在报告中查找的内容：

大依赖。为什么它们这么大？是否有更小的替代品（例如，Preact 代替 React）？您是否使用了它包含的所有代码（例如，Moment.js 包含许多经常不使用且可能被删除的语言环境）？
重复的依赖项。您是否看到同一个库在多个文件中重复出现？（例如，使用 optimization.splitChunks.chunks 选项 - 在 webpack 4 中 - 或 CommonsChunkPlugin - 在 webpack 3 中 - 将其移动到一个公共文件中。）或者**包是否有同一个库的多个版本？
类似的依赖。是否有类似的库可以完成大致相同的工作？（例如，moment 和 date-fns，或 lodash 和 lodash-es。）尝试使用单一工具。

总结

削减不必要的字节. 压缩所有内容，剥离未使用的代码，添加依赖项时要明智
按路由拆分代码. 只加载真正需要的东西，稍后再延迟加载其他东西
缓存代码. 您应用程序的某些部分的更新频率低于其他部分。将这些部分分成文件，以便仅在必要时重新下载
跟踪大小. 使用 webpack-dashboard 和 webpack-bundle-analyzer 等工具来了解您的应用程序有多大。每隔几个月重新审视您的应用程序的整体性能

Webpack 并不是唯一可以帮助您更快地开发应用程序的工具。考虑将您的应用程序设为渐进式 Web 应用程序以获得更好的体验，并使用 Lighthouse 等自动分析工具来获得改进建议。

不要忘记阅读 webpack 文档——它们还有很多其他有用的信息。

并确保使用培训应用程序！

使用 webpack 进行 Web 性能优化（三）转载

跟踪包大小

webpack-dashboard

bundlesize

分析为什么包这么大

总结

使用 webpack 进行 Web 性能优化（一）

使用 webpack 进行 Web 性能优化（二）

推荐阅读

本月精选性能专题

本月精选线上案例

本月精选原创好文

联系我们

网媒渠道

友情链接