使用哪些工具来跟踪和分析 webpack 软件包
即使您配置 Webpack 以尽可能缩减应用的大小,也应确保 及其包含的内容否则,您可以安装一个依赖项, 甚至不会注意到!
本部分介绍了一些工具,可帮助您了解自己的软件包。
跟踪软件包大小
如需监控应用大小,请使用 在开发过程中使用 webpack-dashboard 在持续集成环境中运行 bundlesize。
webpack-dashboard
webpack-dashboard 增强了 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 集成,以便在应用变得过大时收到通知:
如需对其进行配置,请执行以下操作:
了解最大尺寸
优化该应用,使其尽可能小。运行正式版 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
或推送代码,您会看到输出文件
足够小:
或者,如果失败,则执行以下操作:
深入阅读
- Alex Russell讲述在现实世界中应该如何加载时间 目标值
分析 app bundle 这么大的原因
您可能需要深入了解该 bundle,看看哪些模块会占用空间。Meet webpack-bundle-analyzer:
<ph type="x-smartling-placeholder">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
深入了解哪些因素能够增加规模