Rollup与Vite

文章目录

• • @[toc]
  • • Vite底层使用的Rollup构建原理
    • • Rollup 构建流程概览
      • Rollup 的插件机制
      • Rollup 构建原理深入
      • 使用 Rollup 构建
    • 如何利用Rollup的高级特性
    • • 代码分割（Code Splitting）
      • 插件开发
      • 动态导入（Dynamic Imports）
      • 条件编译（Conditional Compilation）
      • 树摇（Tree Shaking）
      • 自定义输出格式
    • 自定义Rollup配置与Vite集成
    • • 理解 Vite 的 Rollup 配置
      • 自定义 Rollup 配置
      • 使用自定义 Rollup 插件
      • 配置 Rollup 插件
      • 调整 Rollup 构建行为
      • 测试和调试自定义配置

Vite底层使用的Rollup构建原理

Rollup 是 Vite 在构建阶段的核心引擎，它负责将项目中的模块打包成浏览器可以理解的格式。Rollup 的设计目标是针对现代 JavaScript 的模块化特性，尤其是 ES Modules，提供高效的打包解决方案。

Rollup 构建流程概览

Rollup 的构建流程可以分为以下几个阶段：

• 解析（Parsing）：读取源代码并将其转换为抽象语法树（AST）。
• 转换（Transforming）：遍历 AST 并应用插件提供的转换规则。
• 解析依赖（Resolving Dependencies）：确定每个模块的依赖关系。
• 构建模块图（Building the Module Graph）：创建整个项目中所有模块之间的依赖关系图。
• 生成代码（Generating Code）：从模块图生成最终的输出代码。
• 输出（Outputting）：将生成的代码写入文件系统。

Rollup 的插件机制

Rollup 的强大之处在于它的插件机制，插件可以扩展 Rollup 的功能，使其能够处理不同的文件类型和执行特