Rollup 的打包优化主要通过以下几个方面实现：
- Tree-shaking：Rollup 使用静态分析技术，只打包代码中实际使用到的部分，而忽略未使用的代码。这样可以大大减小打包后的文件大小，提高加载速度。
Tree-shaking详解
Tree-shaking是一种通过静态分析来确定哪些代码未被使用，并将其从最终打包的文件中删除的优化技术。它的实现原理如下： a. ES6模块系统：Tree-shaking的前提是使用ES6模块语法。ES6模块系统使用静态分析来确定模块之间的依赖关系，因此可以准确地知道哪些代码被导入和使用。
b. 依赖图构建：在打包过程中，Rollup会根据模块之间的依赖关系构建一个依赖图。该依赖图描述了每个模块导入和导出的内容。
c. 无副作用标记：为了让Tree-shaking生效，代码中不能有副作用（side effects），例如对全局变量的修改、网络请求等。如果某个模块被标记为有副作用，Rollup将会保留整个模块的代码，而不会进行优化。
d. 标记未使用代码：通过静态分析，Rollup可以识别出哪些代码在整个依赖图中没有被使用。这些未使用的代码会被标记为可删除。
e. 代码删除：在生成最终的打包文件时，Rollup会根据标记的信息，将未被使用的代码从打包文件中删除。这样可以减小文件大小，并提高加载速度。
- Scope Hoisting：Rollup 会将模块中的代码尽可能地合并到一个函数中，以减少函数调用的开销，从而提高代码执行效率。
- Code splitting：Rollup 支持将代码拆分成多个较小的文件，以实现按需加载和并行加载，提高页面加载速度。
Code splitting详解
Code splitting是一种将代码拆分成多个较小文件的优化技术，以实现按需加载和并行加载。它的实现机制如下： a. 动态导入：Code splitting的核心是使用动态导入（Dynamic Import）语法。动态导入是一种在运行时根据需要加载模块的方式，而不是在打包时静态地将所有模块打包到一个文件中。
b. 按需加载：通过动态导入，可以将应用程序的不同部分或页面拆分成多个独立的模块。当用户访问特定部分时，只有与该部分相关的模块会被加载，而其他模块则会延迟加载或按需加载。
c. 代码分离：在打包过程中，通过配置或使用插件，可以将应用程序的代码分离成多个块（chunks）。每个块包含一个或多个模块，并生成独立的文件。
d. 入口点和异步加载：通常，应用程序的入口点（entry point）会被打包成一个初始的块，而其他模块则会被异步加载。当需要加载某个模块时，浏览器会发送一个异步请求，然后下载并执行该模块的代码。
e. 路由和代码拆分：在使用框架或库时，可以通过路由（Router）或其他方式来触发代码拆分。例如，当用户导航到不同的路由或执行特定的操作时，可以动态地加载相应的模块。
f. 并行加载：使用Code splitting可以实现并行加载多个模块，从而提高页面加载速度。浏览器可以同时下载多个文件，并在下载完成后并行执行它们。
- Minification：Rollup 可以对打包后的文件进行代码压缩，去除不必要的空格、注释和代码结构，从而减小文件大小。
Minification详解
a. 无效字符删除：Minification会删除代码中的无效字符，例如空格、换行符、注释等。这些字符在代码执行时不会产生任何影响，但会增加文件大小。
b. 变量和函数名缩短：Minification会将变量和函数名缩短为更短的名称。例如，将"myVariable"缩短为"a"。这样可以减小代码文件的体积，并提高执行效率。
c. 代码压缩：Minification会对代码进行压缩，将冗余的代码和重复的代码进行优化。例如，将多次出现的代码片段提取为单独的函数或变量，从而减小文件大小。
d. 作用域优化：Minification会对代码的作用域进行优化。例如，将全局作用域中的变量转换为局部作用域中的变量，从而减少变量的查找时间和内存占用。
e. 字符串处理：Minification会对字符串进行处理，例如将多次出现的字符串提取为变量或常量。这样可以减小代码文件的体积，并提高执行效率。
- 插件系统：Rollup 提供了丰富的插件系统，可以通过插件进行自定义的优化和转换。例如，可以使用插件将 ES6 代码转换为 ES5 代码，或者将 CSS 文件提取为单独的文件等。
