npm 在前端开发中扮演着重要的角色。但是，我们常常忽视了对于包大小的控制。随着项目复杂度的增加，不断引入新的依赖包，最终导致构建出来的代码体积越来越大。如果我们能够及时的察觉到这些问题并采取一些措施去优化包大小，将会对网站性能和用户体验产生正面影响。
在本文中，我们将介绍 rollup-plugin-sizes 这个 npm 工具，它可以帮助我们自动计算每个模块的大小，并以易读的格式展示出来，从而更好地掌控整个项目的大小。
安装
首先，我们需要安装 rollup-plugin-sizes：
--- ------- ---------- -------------------
接下来，在 rollup 配置文件中，添加如下代码：
------ ----- ---- ----------------------
------ ------- -
------ ---------------
------- -
----- -----------------
--
-------- ---------
--现在，运行 rollup 命令，你将会看到类似下面的输出信息：
--- ------ ------ ------------ ---- -- -- -------------- ---- -- - -- ------------------------- --- - - -- ------------------------- --- - -- -------------- ---- -- -- ------------------------- - -
使用
rollup-plugin-sizes 提供了一些选项，可以帮助我们更好地控制输出信息。例如：
-------
-------------- -----
-------- ------ ----- --------- -- -
-- ----- - ---- - --- -
------ --------- - ----------------- -- ----------
-
------ --------- - ----------
--
--这里，我们启用了 reportDetails 选项，它将会在每个模块的大小后面展示详细信息。同时，我们也定义了一个自定义的 getSize 函数，它将会被用来格式化模块的大小。
除此之外，rollup-plugin-sizes 还提供了其他一些有用的选项，例如：
- exclude: 忽略指定的模块。
- include: 只计算指定的模块。
- warnOnZeroBuild: 如果构建出来的文件大小是 0，产生警告信息。
结论
通过使用 rollup-plugin-sizes，我们可以更好地掌控整个项目的大小，并及时采取一些措施去优化包大小。这将会对于网站性能和用户体验产生积极影响。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/41350