这是我参与「第四届青训营 」笔记创作活动的第5天
昨天学习了Webpack知识体系，我们了解了前端工程化的一些知识和打包工具的使用，今天，我们将进入Vite知识体系的学习，继续前端学习之路。
在以前开发环境还不太完善的时候，需要考虑许多效率，代码质量、性能的问题，这些成为了前端工程的痛点。
1. 前端工程的痛点
模块化：ESM、CommonJS，UMD
资源编译：高级语法的编译
产物质量：代码体积、代码性能
开发效率：热更新
这些因素需要我们在开发过程中考虑到，针对这些问题，前端构建工具的产生具有意义。
2. 什么是Vite
Vite是新一代前端构建工具
组成部分：
- No-bundle开发服务，源文件无需打包
- 生产环境基于Rollup的Bundler
核心特征：
- 高性能，dev启动速度和热更新速度非常快！
- 简单易用，开发者体验好
基于原生ESM的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
基于Esbuild的编译性能优化
Esbulid--基于Golang开发的前端工具，具备如下能力：
- 打包器Bundler
- 编译器Transformer
- 压缩器Minifier
Esbulid性能极高，在Vite中被深度使用
Vite上手使用
使用Sass/Scss & CSS Modules
使用静态资源
生产环境Tree Shaking
优化原理：
- 基于ESM的import/export 语句依赖关系，与运行时状态无关
- 在构建阶段将未使用到的代码进行删除
学习到现在，Vite给你最直观的印象如何？
- 响应迅速，比传统的工程化打包工具效率高
- 开箱即用，不需要配置什么复杂的东西，建立好脚手架就能使用
Vite的整体架构
关键技术：依赖预打包
为什么要进行预打包？
- 避免node_modules过多的文件请求
- 将CommonJS格式转换为ESM格式
实现原理：
- 服务启动前扫描代码中用到的依赖
- 用Esbuild对依赖代码进行预打包
- 改写import语句，指定依赖为预构建产物路径
关键技术：单文件编译
用Esbuild编译TS / JSX
优势：编译速度提升10-100倍
局限性：
- 不支持类型检查
- 不支持语法降级到ES5
关键技术：代码压缩
Esbulid作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具
关键技术：插件机制
开发环境：模拟Rollup插件机制
生产环境：直接使用Rollup
