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