Vite知识体系 | 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的第5天，该篇笔记学习的是Vite知识体系
什么是vite
新一代前端构建工具
两大组成部分：
- No-bundle开发服务，源文件无需打包
- 生产环境基于Rollup的Bundler
特征：
- 高性能 启动速度 热更新快
- 简单易用
当下问题
- 缓慢的启动->项目编译等待成本高
- 缓慢的热更新->修改代码后不能实时更新
两大行业的趋势
- 全球浏览器对原生ESM的普遍支持(目前占比 92% 以上)
- 基于原生语言(Go、Rust)编写前端编译工具链
浏览器原生ESM支持
两大要素
- script标签增加type="module”属性
- 使用ESM模块导入导出语法
基于原生ESM 的开发服务优势
- 无需打包源代码
- 天然按需加载
- 可以利用文件级的浏览器缓存
基于Esbuild的编译性能优化
Esbuild——基于Golang开发的前端工具,具备:
- 打包器
- 编译器
- 压缩器
性能极高,在Vite中被深度使用
vite使用
使用Sass/Scss & CSS Modules
使用scss css Modules
使用静态资源
hmr直接可用 不用配置
生产环境Tree Shaking
优化原理:
- 基于ESM的import/export语句依赖关系，与运行时状态无关
- 在构建阶段将未使用到的代码进行删除
Tree Shaking在 Vite中无需配置，默认开启!
整体架构
进阶路线
深入双引擎
esbuild rollup.js
Vite插件开发（抽离逻辑 易于拓展）
拆包
参考资料： cn.vitejs.dev/config/buil… rollupjs.org/guide/en/#o…
