Vite基本概念及实现原理

原创于 2025-07-30 11:35:55 发布 · 973 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vite #前端构建工具

前端专栏收录该内容

41 篇文章

订阅专栏

介绍

Vite 是一种新型前端构建工具，它主要由两个部分组成：

一个开发服务器： 它基于原生 ES 模块提供了丰富的内建功能，如速度快到惊人的模块热更新
一套构建指令： 它使用 Rollup 打包你的代码，提供指令来优化构建过程，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源

Vite 作为利用浏览器原生 ESM 的构建工具，省略了开发环境的打包过程，利用浏览器去解析imports，服务端按需编译返回，同时速度快到提升了惊人的模块热更新，而且速度不会随着模块的增加而变慢。所以，使用 Vite 比 Webpack 开发项目快好几倍。

Vite 有以下几个主要特性：

1）极速的冷启动：Vite 采用原生 ESM 作为模块系统的实现，避免了传统打包工具在启动时的长时间编译过程，从而实现了极速的冷启动

2）热模块替换（HMR） ：Vite 内置了热模块替换功能，可以在不刷新页面的情况下，实时更新模块代码，提高开发效率

3）原生 ESM 支持：Vite 直接利用浏览器对 ESM 的支持，无需额外转换，使得代码更加原生、高效

4）插件化扩展：Vite 支持通过插件进行扩展，开发者可以根据自己的需求，定制开发流程

实现原理

Vite 的实现原理主要基于原生 ESM、Rollup 以及 WebSocket 等技术

原生ESM：Vite 利用浏览器对 ESM 的原生支持，将项目中的模块按照 ESM 的规范进行组织。在开发过程中，Vite 只会处理被引用的模块，而不会对整个项目进行打包，从而实现了极速的冷启动
Rollup：虽然 Vite 没有直接采用 Webpack 作为打包工具，但它借鉴了 Rollup 的思想。Rollup 是一个轻量级的模块打包器，它采用基于 ESM 的 tree shaking 技术，可以去除未使用的代码，减少打包体积。Vite 在构建生产环境代码时，会利用 Rollup 进行打包，因此 Vite 还附带了一套构建优化的构建命令，开箱即用
WebSocket：为了实现热模块替换功能，Vite 使用 WebSocket 在服务器和客户端之间建立了一个长连接。当文件发生变化时，服务器会通过 WebSocket 将更新后的模块发送给客户端，客户端收到更新后，会替换掉原有的模块，实现热更新

基于 ESM 的 Dev Server

在 Vite 出现之前，传统的打包工具如 Webpack 通常会在启动开发服务器之前解析所有依赖并进行打包构建，这意味着 Dev Server 必须等待所有模块构建完成，即使在开发过程中只修改了一个子模块，整个 bundle 文件也会重新打包，导致启动时间随着项目规模增大而变长。

在这里插入图片描述

相比之下，Vite 充分利用了浏览器对 ESM 的原生支持。当代码执行到模块加载时，浏览器会动态地下载导入的模块，而不需要等待整个项目的构建完成。这种动态加载的方式实现了即时编译，使得灰色部分（即暂时未用到的路由）不会参与构建过程。因此，随着项目规模的增大和路由的增加，Vite 的构建速度不会受到影响。

在这里插入图片描述