Rollup 的构建性能优化有哪些方法？

推荐答案

1. 使用 Tree Shaking：Rollup 默认支持 Tree Shaking，确保只打包项目中实际使用的代码，减少输出文件的体积。
2. 代码分割：通过 output.manualChunks 或动态导入（import()）将代码拆分为多个 chunk，减少初始加载时间。
3. 使用缓存：利用 rollup-plugin-cache 插件缓存构建结果，避免重复构建未更改的模块。
4. 并行构建：使用 rollup-plugin-parallel 插件并行处理多个任务，提升构建速度。
5. 减少插件使用：避免使用过多插件，尤其是那些对构建性能影响较大的插件。
6. 优化 Rollup 配置：通过配置 output.format 和 output.sourcemap 等选项，减少不必要的输出和调试信息。
7. 使用更快的插件替代品：例如，使用 esbuild 替代 Babel 进行代码转换，显著提升构建速度。
8. 减少模块解析时间：通过 external 选项将第三方库标记为外部依赖，避免 Rollup 解析这些模块。
9. 使用增量构建：在开发环境中，结合 rollup-plugin-livereload 或 rollup-plugin-serve 实现增量构建，减少每次构建的时间。
10. 优化依赖管理：使用 pnpm 或 yarn 的 PnP 模式，减少依赖安装和解析时间。

本题详细解读

1. Tree Shaking

Tree Shaking 是 Rollup 的核心特性之一，它通过静态分析代码，移除未使用的模块和代码片段。确保在项目中启用 Tree Shaking，可以有效减少最终打包文件的体积。

2. 代码分割

代码分割可以通过两种方式实现：

• 手动分割：使用 output.manualChunks 配置，将特定模块打包到单独的 chunk 中。
• 动态导入：使用 import() 语法，按需加载模块，减少初始加载时间。

3. 使用缓存

rollup-plugin-cache 插件可以将构建结果缓存到磁盘，避免在每次构建时重新处理未更改的模块，从而提升构建速度。

4. 并行构建

rollup-plugin-parallel 插件可以将构建任务分配到多个 CPU 核心上并行执行，显著提升构建速度，尤其是在处理大型项目时。

5. 减少插件使用

每个插件都会增加构建过程的复杂度，尤其是那些对构建性能影响较大的插件（如 Babel）。尽量减少插件的使用，或者选择性能更优的替代品。

6. 优化 Rollup 配置

通过合理配置 Rollup 的输出选项，可以减少不必要的输出和调试信息。例如，关闭 sourcemap 或选择合适的 output.format，可以提升构建性能。

7. 使用更快的插件替代品

esbuild 是一个极快的 JavaScript 打包工具，可以用它替代 Babel 进行代码转换，显著提升构建速度。

8. 减少模块解析时间

通过 external 选项将第三方库标记为外部依赖，避免 Rollup 解析这些模块，从而减少构建时间。

9. 使用增量构建

在开发环境中，结合 rollup-plugin-livereload 或 rollup-plugin-serve 实现增量构建，只重新构建更改的部分，减少每次构建的时间。

10. 优化依赖管理

使用 pnpm 或 yarn 的 PnP 模式，可以减少依赖安装和解析时间，从而提升整体构建性能。