6.0 指南导读

Vite作为一款专为现代Web应用设计的构建工具，以其独特的启动速度和热模块替换（HMR）能力，在大型、复杂的单页应用（SPA）开发中脱颖而出。本指南旨在深入剖析Vite的独特优势、适用场景，并详细阐述项目构建配置策略，进而指导开发者如何高效利用Vite的发布管理系统，实现开发到发布的无缝衔接。

6.1 Vite简介

6.1.1什么是Vite

Vite是一种新型前端构建工具，能够显著提升前端开发体验。主要由两部分组成开发服务器和构建指令。开发服务器基于原生 ES 模块提供丰富的内建功能，如快速模块热更新（HMR）。构建指令使用预配置的 JavaScript 打包器（Rollup.js） 打包代码，输出用于生产环境的高度优化过的静态资源。Vite 还提供强大的扩展性，可通过插件 API 和 JavaScript API 进行扩展和项目优化，并提供完整的类型支持。Vite 是一个基于 ES modules 的前端构建工具，主要特点包括快速的冷启动、按需编译、热更新、插件化，下面是特点，以下是其详细说明。

① 极速的服务启动：使用原生ESM文件，无需打包。

② 轻量快速的热重载：无论应用程序大小如何，都始终极快的模块热重载（HMR）。

③ 丰富的功能：对 TypeScript、JSX、CSS 等支持直接引用。

④ 优化的构建：可选“多页应用”或“库”模式的预配置Rollup.js构建。

⑤ 通用的插件：在开发和构建之间共享Rollup-superset插件接口。

⑥ 完全类型化的API：灵活的API和完整TypeScript类型。

6.1.2为什么选择Vite

Vite 和传统的打包工具（如 webpack）在构建方式、编译方式、热更新方式、插件化方式和支持的框架等方面都有所不同。Vite 更加轻量、快速、灵活，适合于开发小型应用和组件库，而 webpack 更加适合大型应用的构建和优化。

Vite 和传统的打包工具（如 webpack）有以下不同点。

① 构建方式：Vite 采用基于浏览器原生 ES 模块的开发模式，在浏览器请求对应模块时，即时地编译和执行对应的代码，而 webpack 在构建时将所有模块打包成一个或多个bundle.js文件。

② 编译方式：Vite 根据需要动态地编译模块，而 webpack 将所有模块都打包到一个文件中。

③ 热更新方式：Vite 支持热更新，可以在开发时实时更新修改后的代码，而 webpack 需要重新编译整个应用才能看到修改后的效果。

④ 插件化方式：Vite 支持插件化，可以通过插件扩展 Vite 的功能，而 webpack 则需要通过 loader 和 plugin 扩展其功能。

⑤ 支持的框架：Vite 支持多种前端框架，包括 Vue、React、Angular 等，而 webpack 则需要通过相应的 loader 和 plugin 来支持不同的框架。

Vite在进行项目构建时也存在一定的短板，其详细说明如下。

① 不支持所有文件类型：Vite的打包范畴仅限于Vue.js和React等少数几个框架，不支持所有的文件类型。

② 大型项目的支持不够成熟：提供了许多用于大型项目的配置和插件，由于大型项目的复杂性和多样性，需要更多的时间和实践证明其在大型项目中的可靠性。

③ 易受限制：在旧浏览器中可能会受到限制。

Vite相比传统的打包工具（如 webpack）利用浏览器对ES模块的原生支持，实现更快的冷启动和热更新，同时配置更简单，更适合现代前端项目的快速开发和迭代。

创作说明

名称：编程指南-Vue.js 3前端开发从学到用完美实践

版本：2024年

网站：http://www.51xueweb.cn

撰写团队：杜宇飞 侯志强 尤飞祥 段玉昆

指导审核：阮晓龙