1、实践感受vite的新特性
- 快速启动：运行项目时启动速度快
- 即时编译：修改页面不用手动刷新（
Vite热模块替换的作用）
那么 vite 和webpack的关系是怎么样的？
- 先谈谈社区工具都有哪些？
webpack、rollup、parcel、esbuild、vite、vue-cli、create-react-app
| 打包工具 | webpack、rollup、parcel、esbuild 功能：压缩、合并、转换、切割、打包等操作 |
|---|---|
项目搭建 | vue-cli、create-react-app 基于webpack的上层分封装 通过配置去搭建一个项目 |
项目搭建 | vite 开发环境依赖esbuild 进行预构建，生产环境依赖rollup进行打包， |
webpack打包原理
、
webpack会根据我们配置文件（webpack.config.js） 中的入口文件（entry），分析出项目项目所有依赖关系，然后打包成一个文件（bundle.js），交给浏览器去加载渲染。
这样就会带来一个问题，项目越大，需要打包的东西越多，启动时间越长。
可以通过webpack-bundle-analyzer插件看到webpack的打包情况，安装包之，运行打包命令，在dist目录会产生一个report.html
vite运行项目时，首先会用
esbuild进行预构建，将所有模块转换为es module，不需要对我们整个项目进行编译打包，而是在浏览器需要加载某个模块时，拦截浏览器发出的请求，根据请求进行按需编译，然后返回给浏览器。
在开发环境中，Vite主要使用esbuild来进行依赖预构建、代码转换和部分优化工作
这是esbuild 生成的文件，如下
在生产环境下的打包过程中，Vite会切换到使用Rollup。
编译时期的代码合运行的代码。在浏览器中是不同的 打包后的代码
运行时期的代码
运行时期的代码没有做更多的转换，比如js代码兼容低版本浏览器，等等操作都会在打包的时候去实现，所以vite打包运行要快一些。
再说说热更新 webpack
webpack项目中，每次修改文件，都会对整个项目重新进行打包
vite项目中，监听到文件变更后，会用websocket通知浏览器，重新发起新的请求，只对该模块进行重新编译，然后进行替换。
并且基于es module的特性，vite利用浏览器的缓存策略，针对源码模块（我们自己写的代码）做了协商缓存处理，意味着模块加载后，除非源代码改变，否则之后的请求会直接从缓存中读取，提高了性能
按需编译是指esbuild只编译和打包在应用程序运行时实际需要的代码
vite在启动时将所有模块转换为ES Modules (ESM)，在浏览器访问某个路由时，去按需编译对应的模块，按需编译是指esbuild只编译和打包在应用程序运行时实际需要的代码
。
