前言
在开发前端应用的过程中，我们经常需要对代码的大小进行评估。rollup-plugin-filesize-check 就是一个能够帮助我们评估代码大小的 npm 包。本文将会介绍该包的使用教程，并提供使用该包评估代码大小的示例代码。
rollup-plugin-filesize-check 简介
rollup-plugin-filesize-check 是一个 rollup 插件，它将会在 rollup 打包输出的时候，自动计算输出文件的大小，并将其与我们设置的大小阈值进行比较。如果输出文件超出了阈值，该插件将会抛出一个警告，提醒我们检查代码是否存在问题。
安装 rollup-plugin-filesize-check
要使用 rollup-plugin-filesize-check，我们需要先安装 rollup 和 rollup-plugin-filesize-check。在项目文件夹下运行以下命令来安装这两个包：
npm install -D rollup rollup-plugin-filesize-check
rollup-plugin-filesize-check 使用方法
配置 rollup.config.js
我们需要在 rollup 的配置文件中引入并启用 rollup-plugin-filesize-check 插件。以下是配置文件的示例代码：
-- -------------------- ---- -------
------ -------- ---- -------------------------------
------ - ------ - ---- -----------------------
------ ------- -
------ ---------------
------- -
----- ---------------------
------- ------
--
-------- -
---------
----------
--------------- -----
----------------- -----
--------- -
-------------- -----
---------------- -----
--
---
--
--在示例代码中，我们引入了 rollup-plugin-filesize-check 插件，并在 plugins 数组中启用。我们也可以看到在 filesize 的配置项中，我们设置了一些参数来帮助我们评估代码的大小。其中最重要的参数是 reporter，用于指定我们需要报告的信息。
配置 reporter
在 reporter 中，我们可以设置一个或多个属性，用于指定我们需要报告的信息。以下是可用属性及其含义的列表：
- totalSize：输出文件的大小，单位为 bytes。
- totalGzipSize：输出文件的 Gzip 压缩大小，单位为 bytes。
- totalBrotliSize：输出文件的 Brotli 压缩大小，单位为 bytes。
- sizes：一个对象，包含输出文件的大小、Gzip 压缩大小和 Brotli 压缩大小。
在配置文件中，我们可以选择启用其中一项或多项，以便获取我们需要的信息。下面是一个例子：
filesize({
reporter: {
totalBrotliSize: true,
totalGzipSize: true,
},
}),在上面的代码中，我们设置了 totalBrotliSize 和 totalGzipSize 这两个属性，因此在打包完成后，我们将会得到输出文件的 Brotli 和 Gzip 压缩大小。
示例代码
为了更好地理解 rollup-plugin-filesize-check 的使用方法，下面是一个示例代码。
原始代码
function fibonacci(n) {
if (n === 1 || n === 2) {
return 1;
} else {
return fibonacci(n - 1) + fibonacci(n - 2);
}
}经过 rollup 压缩后代码
function fibonacci(n){return 1===n||2===n?1:fibonacci(n-1)+fibonacci(n-2)}rollup-plugin-filesize-check 输出
以下是 rollup-plugin-filesize-check 输出的结果。
bundle.min.js (1.86KB) ├── totalSize : 1893 bytes └── totalGzipSize: 864 bytes
结论
通过使用 rollup-plugin-filesize-check，我们可以轻松地评估我们的代码大小，并及时发现可能存在的问题。在开发前端应用的过程中，该插件是一个非常有用的工具，能够帮助我们提高代码的质量和性能。
参考资料
- rollup-plugin-filesize-check 官方文档: https://www.npmjs.com/package/rollup-plugin-filesize-check
- rollup 官方文档：https://rollupjs.org/
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedacc1b5cbfe1ea0610b01