这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天
一、vite简介
1、是一个面向现代浏览器的更轻、更快的Web应用开发工具
2、使用浏览器原生支持的ES Module，在开发模式下不需要打包，提升开发速度
3、vue-cli 开发模式下必须对项目打包才可以运行
二、Vite优点
1、快速冷启动
2、按需编译
3、模块热更新
4、生产环境使用Rollup打包，基于ES Module打包，体积小
5、开箱即用（TypeScript 内置支持、less/sass/stylus/postcss 内置支持、JSX、Web Assembly）
PS： 使用Webpack打包的原因：
1、浏览器环境不支持模块化
2、零散的模块文件会产生大量的HTTP请求
这两个问题现代浏览器和HTTP2.0已经基本解决了。
三、Vite 的核心功能
- 开启静态web服务器
- 编译单文件组件(拦截浏览器不识别的模块并处理）
- HMR
Vite HMR 热更新：立即编译当前所修改的文件，相应速度快。 Webpack HMR 会自动以这个文件为入口重写build一次，所有涉及到的依赖也都会被重新加载一次，反应速度慢。
四、Vite的使用
初始化创建项目
npm init vite-app vite-demo
切换到项目根目录
cd vite-demo
安装依赖
npm i
运行项目
vite serve
打包项目
vite build
五、实现原理
基本的思路：
1、开启静态Web服务器
使用第三方框架koa来模拟开启Web服务器
2、修改第三方模块的路径
处理：import vue from 'vue' => import vue from '/@modules/vue'
不处理：import App from './App.vue' (.或/都不处理)
3、加载第三方模块
判断如果是以 '/@modules/'结尾，说明是第三方模块，手动拼接好正确的地址，使用require去加载
4、编译单文件组件
两次请求：
把单文件组件编译为对象
编译单文件组件的模板并返回render函数
