Webpack 与 Vite 实现原理

Webpack 与 Vite 实现原理

Webpack 实现原理

一、核心编译过程

Webpack 将项目中的所有文件视为模块（chunk），模块之间的依赖关系决定了最终的打包结构。

二、Loader

（内容待补充）

三、Plugin

（内容待补充）

四、编译流程总结

1. 读取 webpack 配置，初始化唯一的 Compiler 实例，并注册所有 Plugin 到相应的生命周期钩子。调用 compiler.run() 执行编译。
2. 从配置的入口文件开始，递归分析依赖，构建模块。对每个模块，依次执行配置的 Loader 进行转换，生成 AST 并解析出依赖关系，以此递归处理所有子依赖模块。
3. 完成模块构建后，进行一系列优化（如 Tree Shaking、代码分割等），并生成文件哈希。
4. 最终根据模块依赖图和配置的模板，生成打包后的文件。

---

Vite 实现原理

一、开发环境

核心思想：不打包源代码，按需编译。

1. 预构建依赖：启动开发服务器时，使用 esbuild 将第三方依赖一次性打包成单个 ES 模块文件（同时转换 CommonJS 模块并合并相同依赖）。预构建结果会缓存至 node_modules/.vite 目录，仅在 package.json 或锁文件变更时重新构建。
2. 请求拦截与实时编译：浏览器请求源码模块时，Vite 服务器进行拦截，对不同类型的模块（如 .ts、.jsx、.vue、.css）进行实时转译或转换，返回浏览器可直接执行的 JavaScript。
3. 按需加载：浏览器执行入口文件，遇到 import 语句时再发起新模块的请求，Vite 服务器继续拦截并处理，形成循环。

因此，在开发环境进行热更新时，Vite 能精确定位到被修改的模块，并通知浏览器重新请求该模块，无需重新打包。

二、生产环境

默认基于 Rollup 进行打包，流程与传统打包工具类似：

1. 从入口开始构建完整的模块依赖图。
2. 执行 Tree Shaking、代码分割等优化。
3. 生成最终的 Chunk 文件、哈希等，并根据模板输出生产环境包。

三、为什么开发环境使用 esbuild？为什么 esbuild 快？

• 语言优势：esbuild 使用 Go 语言开发，能原生支持并发操作，且内存管理效率更高。
• 职责单一：专注于编译与转换，不进行类型检查、代码质量校验等额外工作，极大提升了速度。

---