Vite 简介

Vite 的诞生

Vite 是由 Evan You，Vue.js 的创始人，发起开发的。随着前端项目变得越来越复杂，传统构建工具如 Webpack 在构建速度和开发体验上逐渐显现出一些瓶颈。尤其是在开发环境中，构建速度慢、冷启动时间长，热更新不够流畅，影响了开发者的工作效率。

为了解决这些问题，Evan You 创建了 Vite。Vite 在设计时，最大化地利用了现代浏览器对 ES Modules 的支持，直接通过浏览器按需加载 JavaScript 模块，这让 Vite 在开发时能避免传统构建工具中的大量打包步骤，从而大幅提升开发效率。

为什么学习

1. 极速冷启动：Vite 利用浏览器本身的 ESModule 支持，在启动时只需要处理项目中实际需要的文件，而不是整个项目。这意味着你可以在几毫秒内启动开发服务器，而不像 Webpack 那样需要等待长时间的打包过程。
2. 热更新速度快：Vite 不会重新打包整个项目，而是仅仅处理修改过的文件，并且直接替换已修改的模块。这种按需更新的方式保证了开发过程中的热更新速度非常快，几乎是即时的。
3. 对框架的深度支持：Vite 对 Vue、React 等现代前端框架提供了开箱即用的支持，甚至能够优化 Vue 和 React 项目的构建过程，让开发者可以更专注于业务开发。
4. 生产环境优化：在生产环境下，Vite 使用 Rollup 进行打包，Rollup 是一个高度优化的构建工具，能够对代码进行高效的 tree-shaking、压缩，最终输出的构建文件非常小，性能也更好。

Vite 的两大组成部分

Vite 针对开发环境和生产环境下的打包构建模式完全不一样，他主要由以下两个部分组成：

• 一个开发服务，服务于开发环境，基于原生 ES 模块和 esbuild 依赖预构建，同时提供了丰富的内建功能，如极快的模块热替换（HMR）
• 一套构建指令，服务于生产环境，基于 Rollup 完成打包，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

Vite 这样做的主要目的是为了在开发环境构建项目时能获得极快的体验。

预备知识

ESM

ES6 Module 也被称作 ES Module (或 ESM )， 是由 ECMAScript 官方提出的模块化规范，作为一个官方提出的规范， ES Module 已经得到了现代浏览器的内置支持。在现代浏览器中，如果在 HTML 中加入含有 type="module" 属性的 script 标签，那么浏览器会

按照 ES Module 规范来进行依赖加载和模块解析，这也是 Vite 在开发阶段实现 no-bundle 的原因，由于模块加载的任务交给了浏览器，即使不打包也可以顺利运行模块代码，具体的模块加载流程我们会在下一节进行详细的解释。

大家可能会担心 ES Module 的兼容性问题，其实 ES Module 的浏览器兼容性如今已经相当好了，覆盖了 90% 以上的浏览器份额。

不仅如此，一直以 CommonJS 作为模块标准的 Node.js 也紧跟 ES Module 的发展步伐，从 12.20 版本开始正式支持原生 ES Module。也就是说，如今 ES Module 能够同时在浏览器与 Node.js 环境中执行，拥有天然的跨平台能力。