前言
- vite（法语意为"快速的"，发音/vit/），是下一代前端开发与构建工具
- 极速的服务启动，使用原生ESM文件，无需打包
- 轻量快速的热重载，无论应用大小如何，都始终极快的模块热重载（HMR）
- 丰富的功能，对TypeScript，JSX、CSS等支持开箱即用
- 优化的构建，可选"多页应用"或"库"模式的预配置Rollup构建
- 通用的插件，在开发和构建之间共享Rollup-superset插件接口
- 完全类型化的API，灵活的API和完整Types
安装依赖
package.json修改script命令
根目录下创建vite.config.js配置文件
根目录下创建index.html入口文件
- 页面引入的脚本必须加type="module"，因为只有加type="module"，我们才能在浏览器里面直接引入es6module
创建main.js文件
我们执行npm run dev启动一下
- 秒开页面
项目中使用vue
mian.js中
App.vue中
我们重新执行npm run dev会发现报错了，因为vite默认不识别vue文件，所以我们需要引入插件
vite.config.js中配置
重新执行npm run dev
接下来我们分析一下页面请求的文件
- 页面引入的文件跟我写的不一样了，我代码中引入的是vue，而这里是从node_modules下引入的
- 说明返回的这里返回的main.js不是原始的main.js，而是经过修改后的main.js
- 那这里引入的node_modules下的文件是什么呢?它是预编译后的文件，官话叫依赖预构建
依赖预构建
原因
- 之所以要进行依赖预构建是为了commonJS和UMD兼容性：在开发阶段中，vite的开发服务器将所有代码视为原生ES模块，因此，vite必须先将作为commonJs或UMD发布的依赖项转换为ESM
- 第二个原因是为了性能：vite将有许多内部模块的ES模块依赖关系转换为单个模块，以提高后续页面加载性能。也就是说一些包内部文件相互引用，预编译之后让这个包成为一个模块，我们只需要一个http请求就可以了。
当你启动项目的时候，它会找到项目依赖
- 发现了main.js
- 在mian.js中发现了你依赖vue，那么它会在你启动的时候，先把vue模块预编译出来，然后放在node_modules下的.vite下的deps下面
- 预编译出来一个 ESmodule版本的vue.js，然后它会在你请求main.js的时候，把你引入的vue代码修改掉，改成预编译后的模块
接下来发现你引入了App.vue文件
- 很明显，浏览器肯定不认识这个App.vue文件
它会在浏览器端请求App.vue文件
请求的这个App.vue文件内容
- 我们可以发现内容是js
说明：
vite会拦截App.vue文件的请求，它会动态的把App.vue文件，编译成一段js，然后返回，就可以在浏览器里运行了
总结：
1、预构建：一上来先把vue打包出来
2、拦截main.js请求，改掉引入的vue路径
3、拦截.vue文件的请求，动态的编译成js文件，使之可以在浏览器端运行
后记
要想完全学会vite，我们需要掌握一个库esbuild，vite整个过程非常依赖esbuild，下一篇我们介绍esbuild
