前言
rollup 是一款有力的 JavaScript 模块打包器，对比 webpack，rollup 更加注重于对 ES6 模块的支持，更加适合用于开发库等需求。然而，通过 rollup 打包出来的代码仍旧不足以达到较小的体积，而 rollup-plugin-prepack 正是在这一方面为我们带来了帮助。本文将对其进行详细介绍及使用说明。
rollup-plugin-prepack
rollup-plugin-prepack 是一款基于 facebook 开源的 prepack 所开发的 rollup 插件。其通过预处理 JavaScript 代码，根据代码执行路径创建更加优化的代码，实现代码体积进一步压缩的目的。
在具体实现上，rollup-plugin-prepack 将需要打包的模块代码进一步预处理，将其中的常量表达式进行求值，并进行简化代码的运行时执行路径，删除其中的多余代码，从而达到更小的代码体积的目的。经测试，该插件能够压缩 30% - 90% 不等。
rollup-plugin-prepack 使用教程
安装
首先，我们需要全局安装 rollup-plugin-prepack 和 prepack。
--- ------- -- --------------------- -------
使用
接下来，在项目根目录下需要修改 rollup.config.js 文件，添加 rollup-plugin-prepack：
------ ------- ---- -----------------------
------ ------- -
-
------ ---------------
------- -
----- -----------------
------- -----
--
-------- -
---------
-
-
-即可使用 rollup -c 命令进行打包。
配置
rollup-plugin-prepack 提供了一些配置项用于更好地使用。默认配置如下：
--------- --- - ------ ------- ----- - ---- ------------ ------- - -- -------- ---------- --- - ---- ------------------ ---- - -- ------ ------ --- - -------- --------- - -- ---------- ----- --- - -------- --------- - ------- ------ ------ - - -- ---------------- ------ --- - ----- - ---- - --------------- ----- --------------------- ------ ---------------- ----- - - ----------------- -------------------- - -------------------- ------------ ----- --- - --------------- --------------- --------- - - -- --------- ---------- --- - ------- --------- ------------------- - -- ---------- ----- --- - ---------- - -- ---------- ------ --- - ---------------- - ---- - -- ----------- --------- --
如果需要更改某一设置，如开启 debug 日志，可以配置如下：
--------- ------ ---- --
示例代码
接下来，我们来写一个简单的例子进行试用。
首先，我们先在终端中执行以下代码，创建项目：
----- -------------------------- -- -------------------------- --- ---- --
接着，在 src 目录下添加两个文件，分别为 user.js 和 index.js，用于后续代码编写。
在 user.js 中写入以下代码，定义 user 对象：
----- ---- - - ----- -------- ------ ---- --- ------- ------ - ------ ------- ----
在 index.js 中写入以下代码，导入 user.js 中的对象并进行控制台打印：
------ ---- ---- -------- -----------------
在终端中运行以下命令来安装 rollup 和 rollup-plugin-prepack：
--- ------- -- ------ ---------------------
接着，在根目录下使用以下命令进行打包：
------ -- ----------------
至此，我们就成功地使用了 rollup-plugin-prepack 进行了预处理，并生成了精简后的代码，得到了如下的输出：
- ------- -------- ------ ------ --- --------- ------ -
总结
通过本文的学习，我们了解了 rollup-plugin-prepack 的具体使用及优化效果，并通过示例代码进行了尝试。当然，我们还可通过配置文件进行更多的调整，使得该插件能够更好地服务于我们的开发需求。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedcb74b5cbfe1ea06125f1