大前端学习笔记 -- Vite实现原理

Vite实现原理

文章内容输出来源：大前端高薪训练营

一、Vite介绍

1. Vite概念

• Vite是一个面向现代浏览器的一个更轻更快的web应用开发工具
• 它基于ECMAScript标准原生模块系统（ES Modules）实现

2. Vite项目依赖

• Vite
• @vue/compiler-sfc

3. 基础使用

vite serve / vite build

在执行vite serve的时候不需要打包，直接开启一个web服务器，当浏览器请求服务器，比如请求一个单文件组件，这个时候在服务器端编译单文件组件，然后把编译的结果返回给浏览器，注意这里的编译是在服务器端，另外模块的处理是在请求到服务器端处理的。

而执行vue-cli-service serve：

当运行vue-cli-service serve的时候，它内部会使用webpack，首先去打包所有的模块，如果模块数量比较多的话，打包速度会非常的慢，把打包的结果存储到内存中，然后才会开启开发的web服务器，浏览器请求web服务器，把内存中打包的结果直接返回给浏览器，像webpack这种工具，它的做法是将所有的模块提前编译打包进bundle里，也就是不管模块是否被执行，是否使用到，都要被编译和打包到bundle。随着项目越来越大，打包后的bundle也越来越大，打包的速度自然也就越来越慢。

Vite利用现代浏览器原生支持的ESModule这个模块化的特性省略了对模块的打包，对于需要编译的文件，比如单文件组件、样式模块等，vite采用的另一种模式即时编译，也就是说只有具体去请求某个文件的时候，才会在服务端编译这个文件，所以这种即时编译的好处主要体现在按需编译，速度会更快。

4. HMR

• Vite HMR
  • 立即编译当前所修改的文件
• Webpack HMR
  • 会自动以这个文件位入口重新build一次，所有的涉及到的依赖也会被重新加载一次，所以反应速度会慢一些

5. Build

• Vite build
  • Rollup
  • Dynamic import
    • polyfill

6. 打包OR不打包

• 使用Webpack打包的两个原因：
  • 浏览器环境并不支持模块化（而现在大部分浏览器都支持ESM模块化了）
  • 零散的模块文件会产生大量的HTTP请求（HTTP2可以长连接）

7. 浏览器对ESModule的支持

现代化浏览器都支持ESModule模块化方式

8. 开箱即用

• TypeScript - 内置支持
• less/sass/stylus/postcss - 内置支持（需要单独安装）
• JSX
• Web Assembly

9. Vite特性

• 快速冷启动
• 模块热更新
• 按需编译
• 开箱即用

二、静态Web服务器

1. Vite核心功能

• 静态web服务器
• 编译单文件组件：拦截浏览器不识别的模块，并处理
• HMR

三、修改第三方模块的路径

创建两个中间件，一个中间件是把加载第三方模块中的import中的路径改变，改成加载@modules/模块文件名，另一个中间件是当请求过来之后，判断请求路径中是否有@modules/模块名称，如果有的话，去node_modules加载对应的模块

四、加载第三方模块

当请求过来之后，判断请求路径中是否以@modules开头，如果是的话，去node_modules加载对应的模块

五、编译单文件组件

发送两次请求，第一次请求是把单文件组件编译成一个对象，第二次请求是编译单文件组件的模板，返回一个render函数，并且把render函数挂载到对象的render方法上。

最终代码:

#!/usr/bin/env node
const path = require('path')
const {
   Readable} = require('stream')
const Koa = require<