资源分类

• 极速的服务启动：使用原生 ESM 文件，无需打包!
• 轻量快速的热重：无论应用程序大小如何，都始终极快的模块热重载（HMR）
• 丰富的功能：对 TypeScript、JSX、css 等支持开箱即用。
• 优化的构建：可选 “多页应用” 或 “库” 模式的预配置 Rollup 构建
• 通用的插件：在开发和构建之间共享 Rollup-superset 插件接口。

传统构建工具的痛点

在 Vite 出现之前，前端开发通常使用 webpack 等构建工具，这些工具虽然功能强大，但也存在一些痛点：

• 启动速度慢： 项目越大，启动时间越长，影响开发效率。

• 热更新慢： 每次修改代码后，都需要重新构建整个项目，导致热更新速度慢。

• 配置复杂： Webpack 等工具配置复杂，学习成本高。

Vite 的出现解决了传统构建工具的痛点，具有以下优势：

• 极速启动： 利用浏览器原生 ES 模块支持，无需打包，启动速度极快。

• 快速热更新： 仅更新修改的模块，保持应用状态，提升开发效率。

• 丰富的功能： 支持 TypeScript、JSX、CSS 等，开箱即用。

• 高度可扩展： 通过插件系统，轻松集成其他工具和框架。

Vite 的工作原理

Vite 的工作原理可以分为开发模式和生产模式：

• 开发模式：

  • Vite 启动一个开发服务器，利用浏览器原生支持 ES 模块的特性，直接加载源代码。

  • 当代码发生变化时，Vite 只会更新修改的模块，并通知浏览器进行热更新，保持应用状态。

• 生产模式：

• Vite 使用 Rollup 打包代码，生成优化后的静态资源文件。

• 这些文件可以部署到任何静态文件服务器上。

Vite 适用场景

Vite 适用于各种项目，尤其适合：

• 单页应用 (SPA)： 如 vue、react 项目。

• 静态网站： 快速构建博客、文档等。

• 库开发： 利用 Vite 的构建功能，高效开发和打包库。

搭建第一个 Vite 项目

使用 npm:

$ npm create vite@latest

使用 Yarn:

$ yarn create vite

使用 PNPM:

$ pnpm create vite

然后按照提示操作即可！

你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

查看 create-vite 以获取每个模板的更多细节：vanilla，vanilla-ts，vue，vue-ts，react，react-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts。