在前端开发过程中，一个代码包的体积往往十分关键。如果一个包过大，将会导致网页加载缓慢、用户体验下降，从而造成用户流失。为解决这个问题，可以使用 npm 包 bundlesize-extconfig。
本文将详细介绍如何使用 npm 包 bundlesize-extconfig，包括安装、配置以及使用示例。希望对前端工程师们有所启发和帮助。
安装
首先，在命令行中使用 npm 安装该包：
npm install bundlesize-extconfig --save-dev
配置
然后，在项目根目录中创建 .bundlesize.js 文件，并在其中添加如下代码：
module.exports = {
"src": [
"./dist/*.js",
"./dist/*.css"
],
"ignore": ["./dist/*.map"],
"maxSize": "30KB"
}在上述代码中：
src属性是必须的，用于指定需要检测体积的源代码路径ignore属性是可选的，用于指定需要忽略的文件路径maxSize属性是必须的，用于指定允许的最大体积
使用示例
假设你的项目有一个 JavaScript 文件和一个 CSS 文件，它们分别位于 ./dist/app.js 和 ./dist/app.css：
// ./dist/app.js
function foo() {
console.log("Hello, World!");
}
foo();/* ./dist/app.css */
body {
background-color: #fff;
color: #333;
}然后，在命令行中运行以下命令：
./node_modules/.bin/bundlesize
你将会看到如下信息：
./dist/app.js | 150 B | gzip size: 105 B | brotli size: 90 B ./dist/app.css | 33 B | gzip size: 29 B | brotli size: 21 B Total size: 183 B
上述输出显示，JavaScript 文件的体积为 150 B，CSS 文件的体积为 33 B，总体积为 183 B。由于配置文件中限制了最大体积为 30KB，所以该命令不会输出警告或错误信息。
如果你想设置一个更小的最大体积限制，可以修改 .bundlesize.js 文件中的 maxSize 属性。例如：
module.exports = {
"src": [
"./dist/*.js",
"./dist/*.css"
],
"ignore": ["./dist/*.map"],
"maxSize": "10KB"
}修改后，再次运行 ./node_modules/.bin/bundlesize 命令：
./dist/app.js | 150 B | gzip size: 105 B | brotli size: 90 B ./dist/app.css | 33 B | gzip size: 29 B | brotli size: 21 B Total size: 183 B
由于设置的最大体积限制过小，这次命令将输出以下警告信息：
Warning! File(s) sizes are over the limit: ./dist/app.js | 150B | maxSize: 10KB | gzip size: 105B | brotli size: 90B ./dist/app.css | 33B | maxSize: 10KB | gzip size: 29B | brotli size: 21B Total size: 183 B - maxSize: 10KB = -9.817 KB
总结
本文介绍了如何使用 npm 包 bundlesize-extconfig 检测前端项目中的代码包体积，并设置最大体积限制，从而防止项目体积过大的问题。该工具的使用非常简单，仅需几行代码，但它对于前端开发者来说非常有帮助，可用于提高用户体验并提高网站 / 应用的性能。
希望本文能够帮助你学习和掌握 bundlesize-extconfig 的使用，以便在你的项目中更好地应用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b43c6eb7e50355dbdb4