这是我参与「第五届青训营 」伴学笔记创作活动的第 15 天

一、前端工程的痛点

1.1 模块化

前端没有统一模块引入的规范，常见的规范有：ESModule、CommonJS、UMD、AMD等，因此需要提供兼容不同模块规范的处理方案

1.2 资源编译

目前众多的高级语法已经成为前端项目开发的标配，如TS, JSX, Vue, Less, Sass等，对于浏览器而言，只认识传统的三大件（HTML、CSS、JS），所以需要将高级语法进行编译；另外呢，静态资源如图片、字体等也需要进行加载

1.3 产物质量

随着前端项目体量增大，需要对其压缩优化，将一些未被使用到的模块进行剔除 需要对产物的兼容性进行处理，以适配更多的浏览器和客户端，进行语法降级处理

1.4 开发效率

能够大大提升开发时的效率，如给予热更新

二、Vite

定位: 新一代的前端构建工具

两大组成部分:

• 开发环境的No-bundle服务，源文件无需打包
• 生产环境基于Rollup的Bandle处理

具备能力：

• 打包器 - Bundle
• 编译器 - Transfer
• 压缩器 - Minifier

核心特征：

• 高性能，dev启动速度和热更新速度非常快
• 简单易用，开发体验好

两大行业趋势

• 全球浏览器对元素ESM的普遍支持（目前占比92%以上）
• 基于原生语言（Go、Rust）编写的前端编译工具链，如Go编写的EsBuild，Rust编写的SWC
• 基于原生ESM开发服务优势
• 无需打包项目源码
• 天然的按需加载
• 可以利用文件级的浏览器缓存

三、Vite的整体架构

关键技术：依赖预打包

为什么进行预打包？

• 避免node_module过多的文件请求
• 将Commonjs格式转化成ESM格式

实现原理：

• 服务启动前扫描代码中用到的依赖
• 用Esbuild对依赖代码进行预打包
• 改写import语句，指定依赖预构建产物路径
• 关键技术：单文件编译
• 如用Esbuild编译TS/JSX

局限性：

• 不支持类型检查
• 不支持将语法降级到ES5
• 关键技术：代码压缩
• Esbuild作为默认的压缩工具，替换传统的Terser, Uglify.js等压缩工具

关键技术：插件机制

• 开发阶段：使用了Plugin Container进行（Mock Rollup）模拟插件机制
• 生产环境：直接使用Rollup

四、Vite的进阶路线

• 深入双引擎 - Esbuild、Rollup
• 插件开发 - ①抽离核心逻辑 ②易于扩展 - 不同阶段的Hooks
• 代码分割(拆包) - 问题：①无法进行并发请求 ②缓存复用率低
• 编译工具 - babel
• 语法安全降级
• 服务端渲染（SSR），用于提高首屏性能和SEO的优化
• 深入底层和社区生态