下一代前端开发利器——Vite（原理源码解析）

本文作者是360奇舞团前端开发工程师

前言

Hi，大家好！

前段时间用Vue3搭建项目时看到同时推出的Vite，只当它是一个新打包工具或者vue-cli的升级版，仍然选择了用Webpack构建项目。最近看了尤雨溪在VueConf上的演讲视频：《Vue3 生态进展和计划》^[1]，感觉它确实解决了现阶段前端工程化的一些痛点，也能体会到尤雨溪对Vite的重视和大力推广的决心，再加上Vue本身的庞大用户基数，Vite确实有可能成为下一代前端构建工具的突破口。

本文将讨论下Vite出现的背景，解决的痛点，核心功能的实现，存在的意义和预期的未来。Vite本身并不复杂。中文官方文档非常清晰简洁，建议大家使用前仔细读下文档。

---

大纲

• 背景

• 什么是Vite？

• 基本用法

• 实现原理

• 源码分析

• 优势与不足

• 与传统构建工具对比

• 兼容性

• 未来

---

背景

这里的背景介绍会从与Vite紧密相关的两个概念的发展史说起，一个是JavaScript的模块化标准，另一个是前端构建工具。

共存的模块化标准

为什么JavaScript会有多种共存的模块化标准？因为js在设计之初并没有模块化的概念，随着前端业务复杂度不断提高，模块化越来越受到开发者的重视，社区开始涌现多种模块化解决方案，它们相互借鉴，也争议不断，形成多个派系，从CommonJS开始，到ES6正式推出ES Modules规范结束，所有争论，终成历史，ES Modules也成为前端重要的基础设施。

• CommonJS：现主要用于Node.js（Node@13.2.0开始支持直接使用ES Module）

• AMD：require.js 依赖前置，市场存量不建议使用

• CMD：sea.js 就近执行，市场存量不建议使用

• ES Module：ES语言规范，标准，趋势，未来

对模块化发展史感兴趣的可以看下《前端模块化开发那点历史》@玉伯^[2]，而Vite的核心正是依靠浏览器对ES Module规范的实现。

发展中的构建工具

近些年前端工程化发展迅速，各种构建工具层出不穷，目前Webpack仍然占据统治地位，npm 每周下载量达到两千多万次。下面是我按 npm 发版时间线列出的开发者比较熟知的一些构建工具。

当前工程化痛点

现在常用的构建工具如Webpack，主要是通过抓取-编译-构建整个应用的代码（也就是常说的打包过程），生成一份编译、优化后能良好兼容各个浏览器的的生产环境代码。在开发环境流程也基本相同，需要先将整个应用构建打包后，再把打包后的代码交给dev server（开发服务器）。

Webpack等构建工具的诞生给前端开发带来了极大的便利，但随着前端业务的复杂化，js代码量呈指数增长，打包构建时间越来越久，dev server（开发服务器）性能遇到瓶颈：

• 缓慢的服务启动： 大型项目中dev server启动时间达到几十秒甚至几分钟。

• 缓慢的HMR热更新： 即使采用了 HMR 模式，其热更新速度也会随着应用规模的增长而显著下降，已达到性能瓶颈，无多少优化空间。

缓慢的开发环境，大大降低了开发者的幸福感，在以上背景下Vite应运而生。

---

什么是Vite？

基于esbuild与Rollup，依靠浏览器自身ESM编译功能， 实现极致开发体验的新一代构建工具！

概念

先介绍以下文中会经常提到的一些基础概念：

• 依赖： 指开发不会变动的部分(npm包、UI组件库)，esbuild进行预构建。

• 源码： 浏览器不能直接执行的非js代码(.jsx、.css、.vue等)，vite只在浏览器请求相关源码的时候进行转换，以提供ESM源码。

开发环境

• 利用浏览器原生的ES Module编译能力，省略费时的编译环节，直给浏览器开发环境源码，dev server只提供轻量服务。

• 浏览器执行ESM的import时，会向dev server发起该模块的ajax请求，服务器对源码做简单处理后返回给浏览器。

• Vite中H