深入了解rollup（一）快速开始

引言

--

Rollup是一个JavaScript模块打包器，它可以将多个模块打包成一个单独的文件，以便在浏览器中使用。与其他打包工具相比，Rollup的主要优势在于它可以生成更小、更快的代码。在本文中，我们将深入了解Rollup的工作原理、使用方法、摇树优化(tree shaking)。

概览

--

Rollup 是一个用于 JavaScript 的模块打包工具，它将小的代码片段编译成更大、更复杂的代码，例如库或应用程序。它使用 JavaScript 的 ES6 版本中包含的新标准化代码模块格式，而不是以前的 CommonJS 和 AMD 等特殊解决方案。ES 模块允许你自由无缝地组合你最喜欢的库中最有用的个别函数。这在未来将在所有场景原生支持，但 Rollup 让你今天就可以开始这样做。

工作原理

1. 解析入口文件：Rollup首先会解析指定的入口文件，找到其中的导入语句和导出语句。它会构建一个模块依赖图，记录每个模块之间的依赖关系。

2. 递归解析依赖：Rollup会递归地解析每个模块的依赖关系，直到所有依赖都被解析完毕。这样就可以构建出完整的模块依赖图。

3. Tree Shaking：在构建完模块依赖图后，Rollup会进行Tree Shaking操作。它会分析每个模块中导出和导入的变量，并标记哪些变量被使用了。然后，在生成最终文件时，只有被标记为使用过的变量才会被保留下来。这样可以消除未使用的代码，减少最终文件的大小和加载时间。

4. 模块合并：根据模块依赖图和Tree Shaking结果，Rollup将所有需要保留下来的代码合并成一个或多个文件。这些文件可以是ES6模块、CommonJS模块或AMD模块等不同格式。

5. 输出最终文件：最后，Rollup将合并后的代码输出到指定的文件中。可以通过配置选项来指定输出文件的路径、格式和名称等。

Rollup的工作原理与其他打包工具类似，但它的Tree Shaking技术使得生成的代码更小、更高效。通过消除未使用的代码，Rollup可以生成更精简、更快速的JavaScript文件，提高应用程序的性能和加载速度。

快速开始

安装rollup

全局安装

npm install -g rollup

项目安装

npm install -D rollup

基本命令行

查看可用选项和参数

npx rollup -h

部分可用选项和参数：

demo示例

.
├── package.json
└── src
    ├── index.js
    └── util.js

index.js

import { getRandomNum } from "./util.js";
const r = getRandomNum(1, 10)
console.log(r)

util.js

/**
 * 随机数
 * @param {*} min 最小值
 * @param {*} max 最大值
 * @returns min-max之间的随机整数
 */
export const getRandomNum = (min, max) => {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

/**
 * 深拷贝
 * @param obj 需要深拷贝的对象
 * @returns 深拷贝对象
 */
export const deepClone = (obj) => {
  if(typeof obj !== 'object' || obj === null) {
    return obj
  }
  const result = Array.isArray(obj) ? [] : {};
  for(let key in obj) {
    if(obj.hasOwnProperty(key)) {
      result[key] = deepClone(obj[key])
    }
  }
  return result
}
export default {getRandomNum,deepClone}

执行命令输出到bundle.js

npx rollup src/index.js --file dist/bundle.js

可以看到打印结果基本和源码相差不大，而且，自动做了摇树优化，也就是把没有用到的代码自动的删除了。

dist/bundle.js

/**
 * 随机数
 * @param {*} min 最小值
 * @param {*} max 最大值
 * @returns min-max之间的随机整数
 */
const getRandomNum = (min, max) => {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
};

const r = getRandomNum(1, 10);
console.log(r);

另外还可以选择编译的格式：

对于浏览器：

# 编译为包含自执行函数（'iife'）的 <script>。
npx rollup src/index.js --file dist/bundle.js --format iife

对于 Node.js:

# 编译为一个 CommonJS 模块 ('cjs')
npx rollup src/index.js --file dist/bundle.js --format cjs

对于浏览器和 Node.js：

# UMD
npx rollup src/index.js --file dist/bundle.js --format umd

摇树优化(tree shaking)

除了可以使用 ES 模块之外，Rollup 还可以静态分析你导入的代码，并将排除任何实际上没有使用的内容，这使你可以在现有的工具和模块的基础上构建，而不需要添加额外的依赖项或使项目的大小变得臃肿。从上面的引入和最后的打包结果就可以看到，没有使用到的deepClone直接被删除了。

注意，摇树优化的核心思想是在编译阶段通过静态分析确定代码的使用情况，而不是在运行时。

所以摇树优化一般是建立在ES6 模块化语法基础之上的，ESM的导入导出是静态的。

CommonJS 模块的导入和导出是动态的，无法在编译阶段静态确定代码的使用情况。一般情况下，摇树优化工具无法在 CommonJS 模块中进行精确的摇树，因为无法静态分析模块间的导入和导出关系。

然而，一些构建工具（如 Webpack）会尝试通过静态分析和启发式方法对 CommonJS 模块进行近似的摇树优化。它们会尽可能地识别出那些可以在编译阶段确定未被使用的代码，并进行剔除。但这种处理方式可能不如对 ES6 模块的优化效果好，且有一定的限制。

摇树优化的原理：

Tree Shaking是一种用于消除未使用代码的优化技术，它在打包过程中只保留被实际使用的代码，从而减少最终生成的文件大小。Tree Shaking的原理可以分为以下几个步骤：

1. 识别依赖关系：在打包过程中，工具（如Rollup）会分析每个模块中的导入和导出语句，构建出一个模块依赖图。这个图记录了每个模块之间的依赖关系。

2. 标记被使用的代码：通过静态分析技术，工具会遍历依赖图，并标记哪些变量、函数、类等被实际使用了。这些标记可以是通过变量引用、函数调用等方式进行识别。

3. 剔除未使用的代码：根据标记结果，工具会将未被使用的代码从最终生成的文件中剔除掉。这些未使用的代码可能是整个模块、模块中的某些函数或类等。

4. 优化输出结果：在剔除未使用代码后，工具会对输出结果进行进一步优化。它可能会进行变量重命名、函数内联等操作，以进一步减少文件大小和提高执行效率。

Tree Shaking原理的核心在于静态分析和标记未使用代码。通过对模块依赖关系的分析，工具可以确定哪些代码是被实际使用的，哪些是未使用的。这种静态分析是在编译时进行的，因此可以在打包过程中进行优化，而不需要运行时的额外开销。

需要注意的是，Tree Shaking只能消除那些在编译时可以确定未使用的代码。对于动态导入、条件导入等情况，工具可能无法准确判断哪些代码会被使用。因此，在使用Tree Shaking时，开发者需要注意编写可静态分析的代码，以确保最终生成的文件能够得到有效优化。

由于是静态分析，所以我们在写代码的时候，需要注意自己的写法，简单来说，尽量的使用最小导入，比如你可以比较一下我们这里导入代码之后，打包的区别：

// 直接默认导入整个对象
import util from "./util.js";
const r = util.getRandomNum(1, 10)
console.log(r)

// 具名导入具体的函数
import { getRandomNum } from "./util.js";
const r = getRandomNum(1, 10)
console.log(r)

总结

--

总结起来，Rollup通过解析模块依赖关系、进行Tree Shaking操作和合并模块代码等步骤，实现了高效而精简的模块打包功能。它是一个强大而灵活的工具，适用于各种规模和类型的JavaScript项目。

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！