随着 JavaScript 应用的不断增加，前端包的大小也变得越来越重要。除了确保代码实现了功能，还需要确保代码大小不会过大，这对于网站加载速度和用户体验来说非常重要。而 rollup-size 就是一个能够帮你分析和减小 JavaScript 包大小的 npm 包。本文将介绍如何使用 rollup-size 进行分析和优化项目。
安装
在任何项目中，你都可以通过以下命令安装 rollup-size：
npm install --save-dev rollup-size
需要注意的是，在 rollup-size 的当前版本中，它的默认输出是在控制台打印结果，而不是在文件中输出。因此需要将结果记录在文件中，以便比较多个版本之间的大小差异。可以使用以下命令进行此操作：
npx rollup-size main.js > output.txt
上述命令将 main.js 文件生成的结果输出到 output.txt 文件中，以便以后进行比较。
使用 rollup-size 进行分析
rollup-size 可以很容易地分析项目中的 JavaScript 包的大小。使用以下命令来检测包的大小：
rollup-size ./build/bundle.js
上述命令假设你的项目的输出文件是 ./build/bundle.js，你可以将其更改为你的项目所需的输出文件位置。该命令将输出以下结果：
Bundle size: 947 kB (gzipped: 201 kB)
这个结果告诉你，你的 bundle.js 文件的大小为 947kB，但经过 gzip 压缩后变成了 201kB。
这个结果可能很有用，但要想更好地优化文件大小，需要进一步了解文件大小是由哪些部分组成的。
深入了解结果
rollup-size 的输出结果包括以下几个部分：
- bundle 类型 - 打包方式。
- 源文件大小 - 未被压缩或优化的文件大小。
- 生产文件大小 - 在生产环境中最终生成的文件的大小。
- gzipped 文件大小 - 经过 gzip 压缩后的文件大小。
这些属性对于分析文件大小以及优化文件大小非常重要。通过分析每个部分，能够更好地了解如何优化文件大小。
示例代码
下面给出示例代码，你可以使用这些代码来让 rollup-size 为你的项目进行分析。
示例代码 1： 分析项目的 JS 包大小
-- -------------------- ---- -------
----- ----------- - -----------------------------
-------------- - -
-- ---
-------- -
-- ---
-------------
-
-该代码示例调用 rollup-size 的插件，并将其添加为 rollup 配置文件的插件。
示例代码 2： 将结果保存为文件
-- -------------------- ---- -------
----- ----------- - -----------------------------
----- - ------------- - - -------------
-------------- - -
-- ---
-------- -
-- ---
-------------
------ ---- -- -
-- -----------
-------------------------------- -----
-
--
-
-该代码示例将 rollup-size 的写回调函数添加到 rollup 配置文件的插件中，并将结果写入文件中。
总结
通过 rollup-size，我们可以轻松地分析和优化 JavaScript 包的大小。通过深入了解结果，我们可以更好地了解如何优化文件大小以及在真正的生产环境中文件的最终大小。
如果你想要加速你的网站和应用程序的速度并提供更好的用户体验，那么优化你的前端包大小是非常重要的。在实际应用中，rollup-size 能够是你的首选工具之一，让你更好地了解你的应用程序的大小和如何进行优化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566aa81e8991b448e2e1d