大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 Size Limit

Size Limit 是 JavaScript 的性能预算工具，它检查 CI 上的每次提交，计算最终用户 JS 的实际成本，并在成本超过限制时抛出错误。

Size Limit 具有以下特征：

• ES 模块和 tree-shaking 支持。
• 向 Travis CI、Circle CI、GitHub Actions 或其他 CI 系统添加大小限制，以了解拉取请求是否会增加大量依赖项。
• 模块化以适应不同的用例，比如：使用自己的打包器的大型 JS 应用程序或包含许多文件的小型 npm 库。
• 可以计算浏览器下载并执行 JS 所需的时间，与以字节为单位的大小相比，时间是一个更准确、更容易理解的度量标准。
• 计算包括 JS 中使用的所有依赖项和 polyfill。

通过 GitHub Action“大小限制”，将在拉取请求讨论中将包大小更改作为 comment 发布。

通过 --why，Size Limit 可以告诉开发者为什么当前库具有这种大小，并显示所有内部依赖项的实际成本，同时可以使用 Statscope 进行此分析。

目前 Size Limit 在 Github 上通过 MIT 协议开源，有超过 6k 的 star、1.8k 的 fork、依赖项目数 15.1k、代码贡献者 100+，妥妥的前端优质开源项目。

Size Limit 如何工作

Size Limit 的大致工作流如下：

• Size Limit 包含一个 CLI 工具、3 个插件（file, webpack, time）和 3 个针对流行用例的插件预设（app, big-lib, small-lib）。 CLI 工具在 package.json 中查找插件并加载配置。
• 如果使用 webpack 插件，Size Limit 会将 JS 文件打包到一个文件中， 跟踪依赖项和 webpack polyfill 非常重要。 它对于具有许多小文件且没有打包器的小型库也很有用。
• webpack 插件创建一个空的 webpack 项目，添加当前库并查找包大小差异。
• time 插件将当前机器性能与低价 Android 设备进行比较，计算 CPU 节流率。
• 然后，time 插件运行无头 Chrome（或桌面 Chrome，如果可用）来跟踪浏览器编译和执行 JS 所需的时间。

目前 MobX、Material-UI、Autoprefixer、PostCSS、Logux 等主流项目都在使用 Size Limit，是一个值得尝试的前端开源项目。

如何使用size-limit

size-limit 适合拥有自己的打包器并将 JS 打包直接发送到客户端（无需将其发布到 npm）的应用程序。 想象一个面向用户的应用程序或网站，例如：电子邮件客户端、CRM、带有交互元素的登陆页面或博客，使用 React/Vue/Svelte lib 或 vanilla JS。

首先安装 preset：

npm install --save-dev size-limit @size-limit/file

将 size-limit 部分和 size 脚本添加到 package.json 中：

+ "size-limit": [
+   {
+     "path": "dist/app-*.js"
+   }
+ ],
  "scripts": {
    "build": "webpack ./webpack.config.js",
+   "size": "npm run build && size-limit",
    "test": "jest && eslint ."
  }

可以通过以下方式获取当前项目的大小:

$ npm run size

  Package size: 30.08 kB with all dependencies, minified and gzipped

接着继续设置限制，将当前总大小添加 25% 并将其用作 package.json 中的限制。

  "size-limit": [
    {
+     "limit": "35 kB",
      "path": "dist/app-*.js"
    }
  ],

将 size 脚本添加到测试套件中:

  "scripts": {
    "build": "webpack ./webpack.config.js",
    "size": "npm run build && size-limit",
-   "test": "jest && eslint ."
+   "test": "jest && eslint . && npm run size"
  }

对于 JS 应用及时间限制、大的三方库、小的库的用法可以参考文末资料。当然，如果需要在 JS 中使用，可以参考下面的示例：

const sizeLimit = require("size-limit");
const filePlugin = require("@size-limit/file");
const webpackPlugin = require("@size-limit/webpack");

sizeLimit([filePlugin, webpackPlugin], [filePath]).then((result) => {
  result; //=> { size: 12480 }
});

本文总结

本文主要和大家介绍 Size Limit，即一款JavaScript 的性能预算工具，它检查 CI 上的每次提交，计算最终用户 JS 的实际成本，并在成本超过限制时抛出错误。相信通过本文的阅读，大家对 Size Limit 会有一个初步的了解。

因为篇幅有限，文章并没有过多展开，如果有兴趣，可以在我的主页继续阅读，同时文末的参考资料提供了大量优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏！

参考资料

https://github.com/ai/size-limit/tree/eff503cd9c794aa2e99207d0e33f793bce3c8062

https://github.com/mbalabash/estimo/issues/5

https://docs.google.com/presentation/d/1DutTpZ8p8K6JytEvNK1bJuvEIU3uMdhswwuZawdpuH0/edit#slide=id.g56184bbff6_3_42