从 ES 模块说起
在浏览器支持ES 模块之前，JavaScript 并没有提供原生机制让开发者以模块化的方式进行开发。所以我们不得不通过“打包”的方式，使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。
直到，浏览器开始逐渐原生支持ES。
浏览器什么时候开始原生支持 ES 模块的呢？
浏览器对 ES 模块（ECMAScript Modules，ESM） 的原生支持是从 2017 年开始逐步实现 的，以下是主要浏览器的支持时间线：
1. 2017 年 5 月 - Safari 10.1（macOS Sierra）
● 第一个原生支持 ES 模块的浏览器。
● 支持 <script type="module"> 语法。
2. 2017 年 9 月 - Chrome 61 / Edge 16 / Firefox 60
● Chrome 61（2017 年 9 月）正式支持 ES 模块。
● Firefox 60（2018 年 5 月）默认启用支持。
● Edge 16（2017 年 10 月）基于旧版 EdgeHTML 引擎支持 ESM。
3. 2018 年 - 主流浏览器全面支持
● 到 2018 年，所有现代浏览器（Chrome、Firefox、Safari、Edge）均已原生支持 ES 模块。
● Node.js 12+（2019 年）也开始稳定支持 ESM（需 .mjs 扩展名或 "type": "module"）。
关键特性支持：
● <script type="module">：允许浏览器直接加载 ES 模块。
● 动态导入 import()：支持按需加载模块（Chrome 63+，2018 年）。
● 严格模式默认启用：ES 模块默认在严格模式下运行。
示例代码：
<!-- 浏览器原生加载 ES 模块 -->
<script type="module">
import { func } from './module.js';
func();
</script>
Vite 诞生
Vite 首次公开发布是在 2020 年，由 Vue.js 的创始人尤雨溪主导开发。以下是关键时间节点：
1. 正式亮相（2020 年 4 月）
- 2020 年 4 月：尤雨溪在 GitHub 上首次开源 Vite，并发布了 Vite 的第一个版本（v0.1.0）。
- 定位：最初作为 Vue 项目的快速开发工具，主打“原生 ESM + 按需编译”的极速开发体验。
2. 快速发展（2020-2021 年）
- 2020 年 5 月：Vite 2.0 开始规划，目标支持多框架（React、Svelte 等），不再局限于 Vue。
- 2021 年 2 月：Vite 2.0 正式发布，成为通用前端构建工具，支持：
- 原生 ES 模块（ESM）开发服务器（无需打包）。
- 基于 Rollup 的生产环境打包。
- 对 React、Svelte、Preact 等框架的官方支持。
3. 主流采用（2022 年至今）
- 2022 年：Vite 被广泛用于新项目，成为现代前端工具的标杆。
- 例如：Vitepress（Vue 官方静态站点生成器）、Astro 等工具默认集成 Vite。
- 2023 年：Vite 4.0 发布，进一步优化性能和插件生态。
为什么 Vite 能快速崛起？
- 极速启动：
- 开发时直接使用浏览器原生 ESM，无需打包，冷启动时间仅需几十毫秒。
- 按需编译：
- 仅编译当前页面需要的文件（类似 Snowpack）。
- 生态兼容：
- 兼容 Rollup 插件，支持 TypeScript、CSS Modules 等开箱即用。
示例：用 Vite 创建一个项目（2024 年）
# 使用 npm/yarn/pnpm
npm create vite@latest my-project -- --template react
cd my-project
npm install
npm run dev
几秒内即可启动一个完整的 React 开发环境。
但，如果需要更早的模块化工具历史，可以追溯到 Webpack（2012）、Rollup（2015）或 Parcel（2017**）。**
Vite 是什么？
Vite 是一款很会借力的前端构建工具。
开发环境免打包：
它充分利用现代浏览器对ES模块原生支持的能力，在开发环境启动服务时，直接预构建依赖，将CJS 转化为ESM，让浏览器承担起“打包”的重任。
异步、按需，加载快：
vite 优于 webpack 的基础源自：vite基于异步的ESM，在执行时不会受阻，而 webpack 采用的是同步的CJS（module.export），串联整个模块图自然要耗费更多时间；在热更新时，二者都采用了 chokidar,但 Vite的热更新是根据本页面的模块按需更新，而webpack的热更新需要在对应模块失活的同时，重新构建整个页面的模块图。
正式环境借力Rollup优化配置
开发环境通过借助浏览器的ESM支持，卸去了打包的的任务，正式环境又借助Rollup的Tree-shaking优势，对静态资源的优化配置，比如分割、合并、压缩等，获得优良体验。
🤔 Vite 一定是个聪明人，懂得知己知彼（浏览器支持ESM可用来减少开发环境构建时间），懂得借力（Rollup的Tree-shaking可提供正式环境配置）
Vite 和 Webpack 的关系
如果说 webpack 是“国之重器”，那么 vite 就是 “国之利器”；webpack凭借大而全、丰富而灵活的配置优势，深入人心。但随着项目的逐渐增大，打包也变得略显笨重、所需时间也越来越久。繁多的配置项，更是让小白望而却步。随着 Vite 在 Vue、React 新版本的支持表现得越来越稳定，极简的配置项、无需打包即可渲染的开发环境、开发时秒级的热更新、靠谱大哥Rollup对正式环境的插件配置，显得清爽又省心。
下一篇，从对比 webpack 的视角，多维度认识 vite
