Vite知识体系

Vite知识体系

一、前端工程的痛点

1. 模块化

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

2. 资源编译

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

3. 产物质量

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

4. 开发效率

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

二、Vite

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

两大组成部分:

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

具备能力：

1. 打包器 - Bundle
2. 编译器 - Transfer
3. 压缩器 - Minifier

核心特征：

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

# 使用
pnpm create vite
1
2

当下问题

业界的构建工具有：Webpack、Rollup、Parcel、browserify等

问题：① 缓慢的启动，项目编译等待成本太高 ②缓慢的热更新，修改代码后不能实时的更新；

瓶颈：① Bundle带来的性能开销 ②JavaScript语言的性能瓶颈（单线程）

两大行业趋势

1. 全球浏览器对元素ESM的普遍支持（目前占比92%以上）
2. 基于原生语言（Go、Rust）编写的前端编译工具链，如Go编写的EsBuild，Rust编写的SWC

基于原生ESM开发服务优势

1. 无需打包项目源码
2. 天然的按需加载
3. 可以利用文件级的浏览器缓存

三、Vite的整体架构

关键技术：依赖预打包

❓为什么进行预打包？

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

🎄实现原理：

1. 服务启动前扫描代码中用到的依赖
2. 用Esbuild对依赖代码进行预打包
3. 改写import语句，指定依赖预构建产物路径

关键技术：单文件编译

如用Esbuild编译TS/JSX

🎨局限性：

• 不支持类型检查
• 不支持将语法降级到ES5

关键技术：代码压缩

Esbuild作为默认的压缩工具，替换传统的Terser, Uglify.js等压缩工具

关键技术：插件机制

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

四、Vite的进阶路线

1. 深入双引擎 - Esbuild、Rollup
2. 插件开发 - ①抽离核心逻辑 ②易于扩展 - 不同阶段的Hooks
3. 代码分割(拆包) - 问题：①无法进行并发请求 ②缓存复用率低
4. 编译工具 - babel
5. 语法安全降级
   • 上层解决方案，@vitejs/plugin-legacy
   • 底层实现，借助babel进行语法自动降级，提前注入Poly-fill实现，如core-js、regenerator-runtime等
6. 服务端渲染（SSR），用于提高首屏性能和SEO的优化
7. 深入底层和社区生态