npm 包 @atomico/rollup-plugin-sizes 使用教程

概述

在前端开发中，我们通常会引入不同的库或框架，这些库或框架经过编译后会包含许多代码，占用大量的空间。为了优化网站的性能，我们需要知道每个库或框架的大小信息。而 @atomico/rollup-plugin-sizes 就是一个可以帮助我们快速获取库或框架大小的 npm 包。

安装

首先，我们需要将 @atomico/rollup-plugin-sizes 安装到我们的项目中。可以使用以下命令：

npm install @atomico/rollup-plugin-sizes --save-dev

使用

在项目中使用 @atomico/rollup-plugin-sizes，需要在 rollup.config.js 文件中添加以下代码：

-- -------------------- ---- -------
------ ----- ---- -------------------------------

------ ------- -
    ------ ---------------
    ------- -
        ----- -----------------
        ------- ------
        ----- -----------
    --
    -------- ---------
-

在以上代码中，我们首先导入了 sizes 函数，然后在 plugins 数组中添加了该函数的调用。这样，在打包时，@atomico/rollup-plugin-sizes 将会自动执行它的任务。

实现原理

@atomico/rollup-plugin-sizes 在打包时，会在 rollup 的后置钩子中获取 bundle 中每个模块的大小信息。具体实现步骤如下：

1. 使用 rollup 提供的 outputOptions 对象获取 bundle 中每个模块的路径和大小信息；
2. 使用 Table 格式化已获取的大小信息，并打印在终端上；
3. 使用 File System 模块将大小信息写入指定的文件中。

示例代码

下面我们来看一下示例代码：

import { foo } from "./foo";
import { bar } from "./bar";

export function myFunction() {
    console.log(foo(), bar());
}

// foo.js
export function foo() {
    return "foo";
}

// bar.js
export function bar() {
    return "bar";
}

在执行 npm run build 时，@atomico/rollup-plugin-sizes 将会输出以下信息：

size snapshot
┌─────────┬────────┬──────┬───────────────────┐
│ plugin  │ file   │ size │ gzip              │
├─────────┼────────┼──────┼───────────────────┤
│ unknown │ bundle │  563 │ 299 Bytes (52,9%) │
│         │ foo.js │   19 │  27 Bytes (1,5%)  │
│         │ bar.js │   19 │  27 Bytes (1,5%)  │
└─────────┴────────┴──────┴───────────────────┘

以上信息包含了整个项目以及每个模块的大小信息。

总结

@atomico/rollup-plugin-sizes 可以帮助我们快速获取库或框架的大小信息。在打包时，它可以帮助我们了解哪些模块占用了大量的空间，从而优化网站的性能。如果你希望了解更多关于 @atomico/rollup-plugin-sizes 的用法和原理，可以访问官方文档或源码。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcb7cb5cbfe1ea061260a