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已经基本解决了。

三、核心功能

1、静态Web服务器

2、编译单文件组件（拦截浏览器不识别的模块并处理）

3、HMR（通过websocket实现）

四、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函数