这是我参与「第五届青训营 」笔记创作活动的第14天
一、本堂课重点内容：
- 浅谈构建工具
- Vite概要介绍
- Vite上手实战
- Vite整体架构
- Vite进阶路线
二、详细知识点介绍：
浅谈构建工具
Vite概要介绍
Vite概览
- 定位：新一代前端构建工具
- 两大组成部分：1.No-bundle开发服务，源文件无需打包；2.生产环境基于Rollup的Bundler
- 核心特征：1.高性能，dev启动速度和热更新速度非常快；2.简单易用，开发者体验好
当前两大行业趋势：
- 全球浏览器对原生ESM的普遍支持（目前占比92%以上）
- 两大要素：
- 1.script标签增加type="module"属性
- 使用ESM模块导入导出语法
- 两大要素：
- 基于原生语言(Go、Rust)编写前端编译工具链，如Go语言编写的Esbuild、Rust编写的SWC
基于原生ESM的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
基于Esbuild的编译性能优化：
Esbuild——基于Golang开发的前端工具，具备如下能力：
- 打包器 Bundler
- 编译器 Transformer
- 压缩器 Minifier
Vite进阶路线
深入双引擎
esbuild
rollup.js
推荐学习顺序：
- 先了解基本使用，动手尝试各项常用配置
- 然后学习其插件开发
Vite插件开发
为什么需要插件机制？
- 抽离核心逻辑
- 易于拓展
复杂度较低的插件：json加载插件
复杂度中等的插件：Esbuild接入插件
复杂度较高的插件：官方React插件
代码分割（拆包）
JS编译工具(Babel)
出现的原因：
- JavaScript语法标准繁多，浏览器支持程度不一
- 开发者需要用到高级语法
语法安全降级
服务端渲染(SSR)
一种常见的渲染模式，用于提升首屏性能和SEO优化
深入了解底层标准
Vite社区生态
Github 40k+ star(可参考webpack 61.3K，rollup 21.8 k)，并且目前还在持续维护
官方提供插件：
@vitejs/plugin-vue,提供Vue3支持 @vitejs/plugin-vue-jsx,提供Vue3 JSX支持 @vitejs/plugin-react,提供React支持 @vitejs/plugin-legacy,提供低版本浏览器降级支持
三、实践练习例子：
Vite上手实战
关于HMR：无需额外配置，自动开启
生产环境 Tree Shaking
优化原理：
- 基于ESM的import/export语句依赖关系，与运行时状态无关
- 在构建阶段将未使用到的代码删除
- Tree Shaking在Vite中无需配置，默认开启
关键技术：单文件编译
用Esbuild编译TS/JSX
优势：编译速度提升10-100x 局限性：不支持类型检查，不支持语法降级到ES5
关键技术：代码压缩
四、课后个人总结：
- 这堂课学习到了Vite这个构建工具，了解了它出现的原因和未来的前景，扩展了自己的知识体系。
- 在前端这个发展飞速的领域，只有不断地学习才能不被拉下。
