目录结构

Vue 3 的源码目录结构相对比较清晰，主要分为以下几个部分：

• compiler-core：Vue 3 编译器的核心部分，包括编译器的 AST 解析、优化、代码生成等逻辑。
• compiler-dom：Vue 3 编译器针对浏览器环境的代码生成部分，包括生成 Vue 组件的 DOM 操作逻辑。
• compiler-ssr：Vue 3 编译器针对服务器渲染的代码生成部分，包括生成 Vue 组件在服务器端渲染时的逻辑。
• reactivity：Vue 3 的响应式系统，包括 ReactiveObject、Ref、ComputedRef 等核心类。
• runtime-core：Vue 3 运行时的核心部分，包括组件实例的创建、生命周期、事件等逻辑。
• runtime-dom：Vue 3 运行时针对浏览器环境的部分，包括组件在浏览器环境下的 DOM 操作逻辑。
• runtime-test：Vue 3 运行时的测试工具。
• server-renderer：Vue 3 服务器渲染的核心部分，包括生成服务器端渲染的 HTML、处理模板等逻辑。
• shared：Vue 3 的公共部分，包括工具函数、常量等。

构建方式

Vue 3 的构建方式主要是基于 Rollup，使用了单个入口文件和 Tree-shaking 技术来实现最小化的打包。在 packages 目录下，每个子目录都是一个独立的 npm 包，采用了 monorepo 的方式进行管理。Vue 3 的源码通过 pnpm 进行依赖管理，构建命令通过 pnpm run build 来进行。在构建的过程中，通过 Rollup 对不同的模块进行打包，生成不同的构建文件，比如 vue.js、vue.min.js、vue.runtime.js 等。这些构建文件针对不同的使用场景进行优化，比如 vue.min.js 是针对生产环境的最小化打包，而 vue.js 则包含了更多的调试信息，方便开发人员进行调试。