这是我参与「第四届青训营 」笔记创作活动的的第6天。
前言
Vite是下一代前端开发与构建工具。Vite意在提供开箱即用的配置，同时它的插件API和JavaScript API 带来了高度的可扩展性，并有完整的类型支持，在未来的前端开发中，有替代webpack作为新一代前端构建工具的趋势。
vite介绍
Vite定位: 新一代前端构建工具
两大组成部分:
- No-bundle开发服务, 源文件无需打包
- 生产环境是基于Roolup的Bundler
核心特征:
- 高性能, dev启动速度和热更新的速度非常快，比webpack快很多！
- 简单易用, 开发者体验好
与webpack相比，Vite的避开了坑
Vite采用基于原生ESM的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
Vite的两大核心是Esbuild和Roolup
Esbuild---基于Golang开发的前端工具, 具有极高的性能, 在Vite中被深度使用
- 打包器Bundler
- 编译器Transformer
- 压缩器Minifier
vite开箱即用，十分便捷！
Vite上手使用
使用Sass/Scss & CSS Modules
使用静态资源
Vite的整体架构
关键技术：依赖预打包
为什么要进行预打包？
- 避免node_modules过多的文件请求
- 将CommonJS格式转换为ESM格式
实现原理：
- 服务启动前扫描代码中用到的依赖
- 用Esbuild对依赖代码进行预打包
- 改写import语句，指定依赖为预构建产物路径
关键技术：单文件编译
用Esbuild编译TS / JSX
优势：编译速度提升10-100倍
局限性：
- 不支持类型检查
- 不支持语法降级到ES5
关键技术：代码压缩
Esbulid作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具
关键技术：插件机制
开发环境：模拟Rollup插件机制
生产环境：直接使用Rollup
