Vite 前端开发的超级加速器 - 从入门到精通

大家好！今天我们来聊聊前端开发中的一个革命性工具 - Vite。如果你觉得你的前端开发速度慢得像蜗牛爬，那么Vite就是为你量身打造的超级加速器！

一、什么是Vite？

Vite（法语意为"快速"）是一个现代化的前端构建工具，由Vue.js的创造者尤雨溪开发。它的目标是为开发者提供更快速的开发体验。

二、Vite的作用是什么？

1、闪电般的服务器启动

Vite通过预先构建依赖项和按需编译的方式，显著减少了开发服务器的启动时间。

Vite在启动时将应用模块分为两类：依赖和源码，从而优化了开发服务器的启动过程。

• 依赖：通常是在开发过程中不会改变的纯JavaScript代码。这些大型依赖（比如包含数百个模块的组件库）的处理成本很高，并且可能以多种模块化格式存在（如ESM或CommonJS）。

  Vite利用esbuild对依赖进行预构建。esbuild使用Go语言编写，其预构建速度比用JavaScript编写的打包器快10到100倍。

• 源码：通常包含需要转换的非纯JavaScript文件（如JSX、CSS或Vue/Svelte组件），并且经常需要编辑。不是所有的源码都需要同时加载（例如，基于路由分割的代码模块）。

  Vite以原生ESM方式提供源码。这实际上是将部分打包工作交给了浏览器：Vite仅在浏览器请求源码时进行必要的转换和按需提供。代码会根据需要动态加载，即仅在实际使用时才进行处理。

2、 即时模块热替换（HMR）

在基于打包的开发服务器中，修改源文件后需要重新构建整个包，这显然是低效的，因为更新速度会随着应用大小的增加而线性下降。

Vite能够在你修改代码时立即更新浏览器内容，无需重新加载整个页面。

在Vite中，HMR是在原生ESM上执行的。编辑文件时，Vite只需精确地使已编辑的模块及其最近的HMR边界失效（大多数情况下只是模块本身），无论应用大小如何，都能保持快速更新。

Vite还利用HTTP头来加速页面的重新加载：源码模块的请求会根据304 Not Modified进行协商缓存，而依赖模块的请求则通过Cache-Control: max-age=31536000,immutable进行强缓存，一旦缓存，就无需再次请求。

3、优化的构建过程

确保开发服务器和生产环境构建之间的最优输出和行为一致性是一项挑战。Vite提供了一套开箱即用的构建优化命令。

Vite使用Rollup进行生产环境构建，以提供更小、更快的构建产物。

Vite的构建过程是为现代web应用设计的，旨在提供最佳的性能和效率。

三、Vite 功能介绍

1、npm 依赖处理和预构建

原生 ESM 导入不支持裸模块导入，例如：

import { someMethod } from 'my-dep';

这样的导入在浏览器中会抛出错误。Vite 会自动检测所有源文件中的裸模块导入，并执行以下操作：

• 预构建：将依赖预构建，以加快页面加载速度，并将 CommonJS/UMD 转换为 ESM 格式。这一步由 esbuild 完成，它的速度比任何基于 JavaScript 的打包器都快得多。
• 导入重写：将导入重写为合法的 URL（例如 /node_modules/.vite/deps/my-dep.js?v=f3sf2ebd），以便浏览器能够正确地加载它们。

2、模块热替换（HMR）

Vite 提供了基于原生 ESM 的 HMR 功能。支持 HMR 的框架可以利用这一功能实现快速、精确的更新，无需重新加载页面或重置应用状态。Vite 已经将 HMR 集成到 Vue 单文件组件（SFC）和 React Fast Refresh 中，并通过 @prefresh/vite 为 Preact 提供了官方支持。

请注意，你无需手动配置这些功能。使用 create-vite 创建应用时，所选模板已经预配置了这些功能。

3、Vite 对 TypeScript 的支持

Vite 原生支持引入 .ts 文件，但这种支持仅限于转译操作。

仅转译，不检查类型

Vite 负责将 .ts 文件转译为 JavaScript，但不会执行类型检查。Vite 假设类型检查已经由集成开发环境（IDE）或构建流程处理。

Vite 有意将类型检查排除在转译过程之外，因为转译和类型检查本质上是两个不同的任务。转译可以针对单个文件进行，与 Vite 按需编译的方式完美契合。而类型检查则需要全面了解整个项目的模块关系。如果将类型检查集成到 Vite 的转译流程中，可能会影响 Vite 的快速响应优势。

Vite 使用 esbuild 将 TypeScript 转译到 JavaScript，约是 tsc 速度的 20~30 倍，同时 HMR 更新反映到浏览器的时间小于 50ms。

结语：
Vite不仅仅是一个构建工具，它代表了前端开发的未来方向。通过解决传统工具的痛点，Vite为我们带来了前所未有的开发体验。无论你是Vue、React还是其他框架的开发者，Vite都值得你尝试和探索。

准备好启动你的Vite之旅了吗？让我们一起感受前端开发的极速快感吧！