Vite知识体系
一、前端工程的痛点
1. 模块化
前端没有统一模块引入的规范,常见的规范有:ESModule、CommonJS、UMD、AMD等,因此需要提供兼容不同模块规范的处理方案
2. 资源编译
目前众多的高级语法已经成为前端项目开发的标配,如TS, JSX, Vue, Less, Sass等,对于浏览器而言,只认识传统的三大件(HTML、CSS、JS),所以需要将高级语法进行编译;另外呢,静态资源如图片、字体等也需要进行加载
3. 产物质量
- 随着前端项目体量增大,需要对其
压缩优化
,将一些未被使用到的模块进行剔除 - 需要对产物的兼容性进行处理,以适配更多的浏览器和客户端,进行
语法降级
处理
4. 开发效率
- 能够大大提升开发时的效率,如给予热更新
二、Vite
定位🎠: 新一代的前端构建工具
两大组成部分:
- 开发环境的No-bundle服务,源文件无需打包
- 生产环境基于Rollup的Bandle处理
具备能力:
- 打包器 - Bundle
- 编译器 - Transfer
- 压缩器 - Minifier
核心特征:
- 高性能,dev启动速度和热更新速度非常快
- 简单易用,开发体验好
# 使用
pnpm create vite
当下问题
业界的构建工具有:Webpack、Rollup、Parcel、browserify等
问题:① 缓慢的启动,项目编译等待成本太高 ②缓慢的热更新,修改代码后不能实时的更新;
瓶颈:① Bundle带来的性能开销 ②JavaScript语言的性能瓶颈(单线程)
两大行业趋势
- 全球浏览器对元素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
- 语法安全降级
- 上层解决方案,@vitejs/plugin-legacy
- 底层实现,借助babel进行语法自动降级,提前注入Poly-fill实现,如core-js、regenerator-runtime等
- 服务端渲染(SSR),用于提高首屏性能和SEO的优化
- 深入底层和社区生态