这是我参与 [第五届青训营] 伴学笔记创作活动的第11天
传统前端工程打包与缺陷
目前前端工程中许多资源以及高级语法比如TS、JSX、Sass等无法被浏览器识别，所以需要将它们编译为浏览器可识别的形式。这背后需要一系列的工具链——以及对于产品来说，需要考虑代码质量、代码压缩以及维护，还有兼容性等问题。于是前端工程需要一个好的编译及打包工具。
以往常常使用webpack、Rollup等工具进行编译及打包，以及开发过程中的热更新——然而由于这些工具在构建时有bundle（打包）的行为，会通过项目各模块之间的依赖关系，将整个项目完整地编译、打包一遍。再加上js语言本身的性能瓶颈，使得每次打包都需要较长的时间——并且再开发过程中进行代码热更新时，由于每次更新都会引起一次完整的打包流程，使得热更新速度慢，开发人员的体验非常不好。
Vite的提出
Vite定义自己为新一代的前端构建工具，它利用现代浏览器大部分支持ESM的现象，摒弃传统的bundle行为，将模块的相互依赖引入交给浏览器处理，而自己只需要处理一些预编译任务。
Vite提供各类脚手架，可以使开发者快速生成vite+项目（如vite+react，vite+vue等等）
它由两大部分组成
- 开发阶段在Nodejs的devServer中，由No-bundle开发服务，源文件无需打包
- 生产环境基于Rollup的Bundler
由于以上特征，Vite拥有高性能,dev启动速度和热更新速度非常快——并且简单易用，较webpack配置量少，更易上手，开发者体验好
基本使用
安装
npm i vite -g
创建项目
npm create vite
选择项目类型（react+ts）
下载依赖包
使用vite创建项目不会自动下载包，会有package.json文件
cd .\vite-project\
npm i -D
至此一个基本的vite+react+TS开发项目就创建好了。终端使用命令可以开启dev或是构建产品
//packge.json
{
//...
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
...//
}
项目打包
终端输入命令 npm run build即可打包
总结
Vite作为新一代的前端构建工具，轻量级、速度快、开箱即用，它无需打包项目源代码；它利用原生的ESM将加载任务交给浏览器，而自身作为中转沟通浏览器和devServer，做到按需加载；其使用esbuild（go语言）进行性能优化，效果良好。
