【前端开发工具】Vite：现代化前端构建工具的崛起

---

前言

在前端开发中，构建工具已经成为日常工作中的必需品。从 Webpack 到 Parcel，再到近年来崭露头角的 Vite，前端构建工具的演进一路走来，解决了很多性能和开发体验上的难题。而 Vite，作为一个新兴的构建工具，凭借其极速的开发体验和简洁的配置，迅速赢得了广泛的关注与使用。

---

1. 什么是 Vite？

Vite 是由尤雾溪（Evan You，Vue.js 的作者）开发的一款前端构建工具。Vite 在法语中是“快速”的意思，正如其名字所示，它主要关注开发效率，旨在提供比传统构建工具更快的开发体验。

Vite 和 Webpack、Parcel 等传统的构建工具相比，其最大亮点在于它采用了基于浏览器原生支持的 ES 模块（ESM），并结合了现代浏览器的特性，使得开发过程中几乎没有任何的等待时间。

截至目前，Vite 的最新稳定版本是 Vite 6.0，于2024年11月26日发布。 Vite 6.0 是自 Vite 2 以来最重要的主要版本发布，带来了许多新特性和改进。
主要变化包括：

• 实验性环境 API：Vite 6 引入了新的环境 API，使框架作者能够提供更接近生产环境的开发体验，并为生态系统共享新的构建模块。
  CN.VITEJS.DEV
• Node.js 支持：Vite 6 支持 Node.js 18、20 和 22+，移除了对 Node.js 21 的支持。
  CN.VITEJS.DEV
• 其他改进：包括对 JSON 序列化的改进、在 HTML 元素中扩展对资源引用的支持、Sass 默认使用现代 API 等。
  CN.VITEJS.DEV

2. Vite 与传统构建工具的区别

传统的构建工具（如 Webpack）通常会在启动时进行一个全量的打包过程，生成一个完整的构建产物，然后再通过热更新（HMR）将代码变动同步到浏览器。而 Vite 则采取了 按需编译 和 增量构建 的方式来提升性能。

Vite 的工作原理：

• 开发模式： Vite 在开发模式下的核心思想是：基于浏览器对 ES 模块的原生支持，按需加载模块，并仅在需要时编译它们。具体来说，Vite 在启动时不会进行全量打包，而是通过一个开发服务器来提供对原始源代码的访问。在请求文件时，Vite 会通过基于 ESM 的方式按需编译模块，极大地减少了等待时间，尤其对于大型项目的启动速度有显著提升。

• 生产模式： 当我们运行 vite build 时，Vite 会使用 Rollup 作为打包工具，生成优化后的生产环境代码。这一步依然采用了传统的全量打包，但由于 Vite 在开发过程中充分利用了增量构建和缓存机制，整个过程也比传统构建工具更快。
  传统构建工具的不足：

• 启动时间长，尤其是在大型项目中。

• 对文件变动的响应较慢，影响开发效率。

• 复杂的配置和插件系统。

• 编译过程会阻塞开发，难以做到即时反馈。
  而 Vite 通过 原生 ESM 支持 和 增量构建，优化了上述问题。

3. Vite 的主要特点

Vite 作为一个现代化的构建工具，具备以下显著特点：

3.1 极速启动和更新

• 极速冷启动：Vite 在开发模式下避免了像 Webpack 那样的全量打包。开发服务器只会按需编译那些在页面中被引用的模块，因此启动时间非常快。
• 极速热更新：Vite 的热更新非常迅速。因为它只需重新加载变动的模块，而不像 Webpack 那样重新构建整个页面。这使得 Vite 在开发过程中几乎没有等待时间，开发体验大大提升。

3.2 原生支持 ES 模块

Vite 的核心是基于浏览器的原生 ES 模块（ESM）支持。相比传统的构建工具，Vite 不需要将所有的代码打包成一个大文件，再交由浏览器加载。开发模式下，Vite 会直接在浏览器中动态加载代码，避免了编译的延迟。

3.3 使用 Rollup 打包生产环境

虽然 Vite 在开发模式下是一个极简的构建工具，但它的生产环境打包是由 Rollup 完成的。Rollup 是一个轻量级的 JavaScript 模块打包器，尤其擅长处理静态导入的模块。Vite 在生产环境下利用 Rollup 的高效性和插件系统进行优化，生成的代码通常比其他工具更加精简和高效。

3.4 插件生态

Vite 提供了强大的插件系统，允许开发者定制自己的构建流程。Vite 支持与许多流行的前端框架（如 Vue、React、Svelte 等）集成，同时也有丰富的插件库，可以用来处理代码优化、静态资源管理、环境变量等任务。

3.5 强大的 TypeScript 支持

Vite 自带了对 TypeScript 的开箱即用支持，不需要额外的配置或安装插件。开发者可以直接在 .ts 和 .tsx 文件中进行开发，Vite 会自动处理 TypeScript 转换。

4. Vite 的优势

• 快速的开发体验： Vite 的快速启动和即时热更新极大提升了开发效率，尤其适合频繁修改代码和实时查看效果的场景。
• 简单的配置： 相比于 Webpack，Vite 的配置非常简洁，且内置了许多常见的开发需求，比如支持 Vue、React、TypeScript 等。
• 现代化的架构： Vite 充分利用了现代浏览器的功能，如原生 ES 模块和 HTTP/2，使得开发体验更加流畅。
• 生产环境优化： 使用 Rollup 进行生产环境打包，生成的代码更加优化、体积更小。

5. Vite 的局限性与挑战

尽管 Vite 有着非常优秀的性能和体验，但它也有一些局限性：

• 浏览器兼容性： Vite 的开发模式依赖于浏览器的原生 ES 模块支持，因此它在老旧浏览器（如 Internet Explorer）上的支持较差。
• 插件生态相对较新： 虽然 Vite 的插件系统非常灵活且易于使用，但相比 Webpack，Vite 的插件生态还在不断发展中，部分插件可能在某些场景下不如 Webpack 成熟。
• 第三方依赖处理： 虽然 Vite 能很好地处理静态资源和现代模块，但某些老旧的第三方库可能不支持 ESM，导致兼容性问题。此时需要额外的配置和处理。

6. Vite 的版本演进与最新版本

Vite 从初版发布至今，已经经历了多个版本的更新，每个版本都引入了新的功能、优化和修复。接下来，我们将通过几个关键版本来对比 Vite 的演变，特别是最新版本与旧版本的差异。

Vite 6.0 是一个重要的版本，它带来了许多新特性和改进，尤其在性能、插件系统以及平台支持方面做了优化和增强。关于我之前提到的 2.x 和 3.x 版本的对比，确实没有考虑到最新的 6.0 版本。

Vite 6.0 版本的更新特点
与 Vite 3.x 版本相比，Vite 6.0 引入了许多新的功能和改进，特别是在以下几个方面：

• 性能提升：Vite 6.0 继续增强了对大项目的支持，优化了开发模式和生产构建的速度，尤其是对于大型应用和复杂场景，Vite 6.0 在增量构建和模块热更新方面提供了更加流畅的体验。

• Node.js 支持：Vite 6.0 支持更高版本的 Node.js，包括 Node 18、20 和 22+，并移除了对 Node 21 的支持。这使得 Vite 能够更好地与最新的 Node.js 生态系统兼容。

• 增强的插件系统：Vite 6.0 对插件系统进行了进一步的优化，开发者可以使用更多自定义插件，并且插件的生命周期管理变得更加高效和灵活。

• 新环境 API：Vite 6.0 引入了新的实验性环境 API，为框架作者提供了更接近生产环境的开发体验，同时为生态系统贡献了新的构建模块，进一步增强了 Vite 的可扩展性。

总结：Vite 2.x、3.x 和 6.0 版本对比

特性/版本	Vite 2.x	Vite 3.x	Vite 6.0
构建速度	较快，优化了 TypeScript 构建	更快，特别是在大项目中的性能显著提升	进一步加速，优化增量构建与缓存管理
框架支持	Vue 3、React 集成良好	Vue 3、React 支持更强，TypeScript 支持增强	同时加强对 Node.js 和浏览器平台的支持
插件系统	支持常见插件，较为成熟	插件系统重构 ，支持更多自定义插件	插件系统优化，提供更强的灵活性和扩展性
生产构建	使用 Rollup 进行优化打包	Rollup 集成优化，支持更多目标平台	更好的平台支持，优化生产构建性能
TypeScript 支持	增强的 TypeScript 构建支持	更强的 TypeScript 支持，优化类型推导	进一步提升 TypeScript 的支持，并优化与 JSX 的处理

生产构建 使用 Rollup 进行优化打包 Rollup 集成优化，支持更多目标平台 更好的平台支持，优化生产构建性能

7. 如何使用 Vite 构建项目

Vite 的安装和配置非常简便，这也是它受开发者喜爱的一个原因。下面是如何使用 Vite 构建一个基本的 Vue 或 React 项目，以及一些常见配置的介绍。

安装 Vite
你可以通过以下命令来安装 Vite：

1. 全局安装 Vite（不推荐）

npm install -g create-vite

然后你可以使用 create-vite 命令来创建新的项目。

2. 使用 npm 或 Yarn 安装

推荐使用 npm 或 yarn 来创建项目：

npm create vite@latest

或者，如果你喜欢 yarn：

yarn create vite@latest

创建完成后，进入项目目录并安装依赖：

cd <your-project-name>
npm install

或者：

yarn install

配置 Vite
Vite 的配置文件是 vite.config.js，你可以在其中进行各种定制化操作。例如，你可以为你的项目添加别名、设置代理、调整打包选项等。

一个简单的 vite.config.js 配置文件可能是这样的：

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    proxy: {
      '/api': 'http://localhost:3000',
    },
  },
  resolve: {
    alias: {
      '@components': '/src/components',
    },
  },
  build: {
    outDir: 'dist',
    chunkSizeWarningLimit: 500,
  },
});

• server.proxy：代理设置，通常用于解决开发环境中的跨域问题。
• resolve.alias：配置路径别名，便于在项目中使用简短的路径引用模块。
• build.outDir：指定构建产物的输出目录。
• build.chunkSizeWarningLimit：设置构建时的警告阈值，用于提醒你构建产物过大。
  在项目中使用 Vite
  如果你使用 Vue 3 或 React，你只需在项目中进行相应的框架配置，Vite 会自动识别并进行优化。例如，对于 Vue 3 项目，你只需要安装 @vitejs/plugin-vue 插件并在 vite.config.js 中进行配置：

npm install @vitejs/plugin-vue --save-dev

然后在 vite.config.js 中引入并配置插件：

import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
});

对于 React 项目，Vite 已经内置支持 React，无需额外配置，只需安装相关依赖即可。

8. 结论：为什么选择 Vite？

Vite 作为现代前端构建工具，在性能、开发体验、框架支持等方面都提供了极大的优势。特别是在开发过程中，Vite 的快速启动和热更新体验，能够大幅提升开发效率。随着 Vite 版本的不断更新，它在生产构建、插件支持以及框架集成方面也越来越成熟，已经成为前端开发者中不可忽视的工具之一。

文末讨论

Vite数据框架还是工具？

从本质上来看，Vite 更偏向 开发工具，而不是一个完整的开发框架。虽然它的功能和配置非常强大，但它并不直接提供应用的核心逻辑或结构（比如像 Vue 或 React 这样的框架那样提供的功能）。Vite 主要作为一个 构建工具，帮助开发者进行高效的前端开发和构建，提供了快速的模块热更新、增量编译、生产构建优化等。

为什么 Vite 是开发工具？

1. 工具链构建：Vite 主要提供前端开发工具链，它优化了开发和构建过程的速度。它为开发者提供了一个极为流畅的开发体验，使用原生 ES 模块，支持热更新，集成了 Rollup 进行生产构建等。

2. 框架无关：Vite 本身并不强制使用某个特定的框架，它既可以用于 Vue 3、React、Svelte 等前端框架，也能用于纯 JavaScript 或 TypeScript 项目。它关注的是构建和开发工具的功能，而不是特定的应用架构或业务逻辑。

3. 配置和扩展：Vite 提供了高度可配置的开发环境，允许开发者根据项目需求进行自定义。它支持插件系统，开发者可以根据需要扩展功能，而这类功能更多是工具性质的，而非框架层面的。

Vite 与框架的关系

虽然 Vite 不是框架，但它与一些框架（如 Vue 3 和 React）有着紧密的集成。例如，Vite 是 Vue 3 官方推荐的构建工具，它优化了 Vue 3 的开发体验，提供了针对 Vue 3 的插件支持（如 @vitejs/plugin-vue）。同样，Vite 也有针对 React 的插件，支持 JSX 转换和热更新等。

但是，这些只是 Vite 在框架中的优化集成，Vite 本身并没有决定或构建框架的核心功能，比如数据绑定、组件管理、路由等，这些仍然是由框架（如 Vue、React 或 Svelte）来提供的。

总结：

• Vite 是开发工具，它的核心功能是提供快速的构建、开发体验和优化。
• Vite 不是框架，它没有像 Vue 或 React 那样处理应用的结构和业务逻辑。

如果把 Vite 视为框架的话，那它更像是一个为现代前端开发提供高效工具支持的“基础设施”，而非提供业务功能和应用架构的框架。