使用哪些工具跟踪和分析 webpack 软件包
即使您将 webpack 配置为尽可能小,仍有必要跟踪 webpack 并了解其包含的内容。否则,您可以安装一个依赖项,使其大小达到原来的两倍,您甚至都不会注意到它!
本部分介绍了有助于您了解软件包的工具。
跟踪软件包大小
如需监控应用大小,请在开发过程中使用 webpack-dashboard,并在 CI 上使用 bundlesize。
webpack-dashboard
webpack-dashboard 可通过依赖项大小、进度和其他详细信息的大小增强 webpack 输出。如下所示:
![webpack-dashboard 输出的屏幕截图](https://web.developers.google.cn/static/articles/monitor-and-analyze/image/a-screenshot-the-webpack-3e248f1f172ea.png?authuser=9&hl=hr)
此信息中心有助于跟踪大型依赖项 - 添加后,会立即在 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 输出](https://web.developers.google.cn/static/articles/monitor-and-analyze/image/a-screenshot-ci-section-5283cb670e1d6.jpg?authuser=9&hl=hr)
如需对其进行配置,请按以下步骤操作:
了解最大尺寸
优化应用以尽可能缩减大小。运行正式版 build。
将包含以下内容的
bundlesize
部分添加到package.json
中:// package.json { "bundlesize": [ { "path": "./dist/*" } ] }
使用 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
请为每个尺寸增加 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
或推送代码,则会看到输出文件是否足够小:
![bundlesize 输出的屏幕截图。所有构建结果都标记为“通过”](https://web.developers.google.cn/static/articles/monitor-and-analyze/image/a-screenshot-the-bundles-142fea0baa50c.png?authuser=9&hl=hr)
或者,在失败时执行以下操作:
![bundlesize 输出的屏幕截图。部分构建结果标记为“失败”](https://web.developers.google.cn/static/articles/monitor-and-analyze/image/a-screenshot-the-bundles-6ec1755da19dd.png?authuser=9&hl=hr)
深入阅读
- Alex Russell关于应该定位的实际加载时间
分析软件包如此大的原因
您可能想要更深入地了解捆绑包,看看哪些模块在其中占用了空间。不妨使用 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
深入了解哪些因素可以增加规模