在前端开发项目中，webpack 是一个常用的打包工具，可以将诸多单独的文件打包成一个 bundle 文件，不过，一个打包好的 bundle 文件的体积很大，会导致页面加载缓慢，甚至直接影响用户体验。所以，在开发过程中必须对打包文件大小进行限制和优化。而使用 webpack-bundle-size-check-plugin 插件可以帮助我们更好地监控打包文件大小，下面介绍使用教程及注意事项。
安装
使用 npm 进行安装即可：
--- ------- ---------- --------------------------------
配置
在 webpack 配置文件中进行如下配置：
----- ---------------------- - --------------------------------------------
-------------- - -
-- ---
-------- -
-- -- ---------------------- --
--- ------------------------
-------- --- - ----- -- ------------
------------ ----- -- ----------
------------ ----- -- -----------
------------ ----- -- --------
------------- ---- -- -------
--
-
-参数说明
WebpackBundleSizeCheck 的参数有：
- maxSize (number)：体积巨大时出现警告的阈值，单位为字节，默认为 244 KB；
- showSummary (bool)：是否显示所有包的总和，默认为 true；
- showChanged (bool)：是否显示更改了大小的包，默认为 true；
- showGzipped (bool)：是否显示压缩大小，默认为 true；
- showMinified (bool)：是否显示全局源，默认为 true。
示例
----- ----------------- - -------------------------------
----- ---------------------- - --------------------------------------------
-------------- - -
------ -----------------
------- -
--------- -----------
--
-------- -
--- ---------------------------- ---------------------
--- ------------------------
-------- --- - -----
------------ -----
------------ -----
------------ -----
------------- ----
--
-
--结论
使用 WebpackBundleSizeCheck 插件可以帮助我们更好地掌控打包文件的体积大小，保证页面的加载速度和用户体验。上述教程仅为基础用法，如果需要更多用法的详细说明，可进入 WebpackBundleSizeCheck 插件官方文档 进行深入学习。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056fa481e8991b448e7b00