Vite知识体系 | 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第11天
浅谈构建工具
为什么需要构建工具
-
模块化方案
- 提供模块加载方案
- 兼容不同模块规范
-
语法转译
- 高级语法转译(Sass、Typescript)
- 资源加载(图片、字体、worker)
-
产物质量
- 产物压缩
- 无用代码删除
- 语法降级
-
开发效率
- 热更新
什么是Vite？为什么是Vite
Vite
-
定位：新一代前端构建工具
-
组成部分
- No-bundle开发服务，源文件无需打包
- 生产环境基于Rollup的Bundler
-
核心特征
- 高性能，dev启动速度和热更新速度非常快
- 简单易用，开发者体验好
Why Vite?
当下传统构建工具存在的问题
-
缓慢的启动->项目编译成本高
-
缓慢的热更新->修改代码后不能实时更新
-
瓶颈
- bundle带来的性能开销
- JavaScript语言的性能瓶颈
当下行业趋势
-
全球浏览器对原生ESM的普遍支持
-
基于原生语言(Go、Rust)编写前端编译工具链
- 如Go语言编写的Esbuild、Rust编写的SWC
基于原生ESM的开发服务优势
- 无需打包项目原代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
基于Esbuild的编译性能优化
Esbuild——基于Golang开发的前端工具，性能及高，在Vite被深度使用，具备如下能力
- 打包器Bundler
- 编译器Transformer
- 压缩器Minifier
Vite的使用
Vite整体架构
关键技术
依赖预打包
-
为什么要预打包
- 避免node_modules过多的文件请求
- 将CommonJS的是转换为ESM格式
-
实现原理
- 服务器启动前扫描代码中用到的依赖
- 用Esbuild对依赖包进行预打包
- 改写import语句，指定以来为与构建产物路径
单文件编译
-
优势：
- 编译速度10-100×
-
局限性
- 不支持类型检查
- 无法降级到ES5
代码压缩
Esbuild作为默认压缩工具，替换传统的的Terser、Uglify.js等压缩工具
插件机制
- 开发阶段->模拟Rollup插件，插件兼容性可查阅Rollup Puglin
- 生产环境->直接使用Rollup
Vite进阶路线
深入双引擎
- Esbuild
- Rollup
- 先了解基本使用·，手动配置->学习其插件开发
Vite插件开发
抽离核心逻辑，易于拓展
-
参考资料
- Vite插件开发文档
- 复杂度较低的插件：json加载插件
- 复杂度中等的插件：Esbuild接入插件
- 复杂度较高的的插件:官方React插件
代码分割(拆包)
JS编译工具（Bable）
语法安全降级
服务端渲染(SSR)
-
参考资料
- Vite-SSR文档
- Vite官方ssr-demo项目
- 使用Vite搭建SSR工程
深入了解底层标准
总结
今天是对Vite的学习的路线分享，对于我而言不论是Vite还是Webpack，我也只是停留在勉强会用的阶段，想要深入学习道阻且长，有了这次Vite的学习路线分享，是我对webpack也好Vite也好都有了更新的认识，加上前节课对Webpack学习体系的学习，对于Webpack和Vite的认识也变得更加清晰。
