前端构建过程已经慢且复杂了太长时间了。无论你是在使用 Webpack、Parcel，还是你自己组合的“怪物”配置（我们都经历过），配置和打包一个 Web 应用往往是个令人头疼的事情。
Vite 是个新晋者，它以速度和简洁令人眼前一亮。而 Vite 不仅仅对开发者重要，它对于企业来说也是一次颠覆。快速的开发周期意味着开发者更开心。开心的开发者写出更好的代码，这也意味着更快的上市时间和更低的业务或客户成本。
Vite 旨在让缓慢的构建痛苦消失。它利用浏览器中的原生 ES 模块，消除了开发构建中对打包代码的需求。翻译一下：你将体验到如此快速的模块热替换（HMR），以至于你的 F5 键都要感到失宠了。让我们深入探讨如何让你的项目使用 Vite，并从此再无回头之路。
Vite 是一个法语单词，意思是“快速”或“迅速”。发音是“veet”，与“meet”押韵。
为什么选择 Vite？谁有时间浪费在慢速构建上？
我们都知道盯着屏幕看进度条慢慢移动有多痛苦，那简直让人怀疑人生。
Vite 提供了几乎瞬时的冷启动服务器、闪电般的模块热替换（HMR），以及比你说“npm install”还要快的构建。
- 闪电般的开发启动：像 Webpack 这样的传统工具在启动之前会先打包你的所有代码。而 Vite 使用原生的 ES 模块来服务你的代码，因此启动很快——浏览器只加载它需要的部分。
- 模块热替换：修改后的代码立即反映，让你的开发体验像爵士萨克斯风独奏一样顺畅。
- 开箱即用的 TypeScript 支持：Vite 可以处理 TypeScript，而无需设置复杂的构建管道。
- 优化的构建：当需要上线时，Vite 使用 Rollup 来高效地打包你的代码。它会将你的代码分成多个块，这样用户就不会下载不需要的内容。
开始使用 Vite
让我们试一试 Vite，看看它能做些什么！
第一步：设置你的 Vite 项目
首先，让我们创建一个新的 Vite 项目。假设你已经安装了 Node.js，打开终端并运行：
npm create vite@latest my-awesome-vite-project -- --template react
这个命令会创建一个基于 React 的 Vite 项目。如果你更喜欢 Vue 或者纯 Vanilla JS，随时可以替换“react”为“vue”或“vanilla”。Svelte、Preact、Qwik 等也都支持！
第二步：安装依赖并运行开发服务器
现在，让我们安装依赖并启动那个闪电般的开发服务器：
cd my-awesome-vite-project
npm install
npm run dev
砰！你的开发服务器现在已经像打了咖啡因的松鼠一样运行了。打开浏览器，修改源文件之一，惊叹于它的速度！
第三步：构建项目结构
Vite 给你提供了一个相当简洁的起始结构。以下是一个典型的项目设置：
my-awesome-vite-project/
├── public/
│ └── vite.svg
├── src/
│ └── assets/
│ └── react.svg
│ ├── App.css
│ ├── App.jsx
│ ├── index.css
│ └── main.jsx
├── index.html
└── vite.config.js
你可以根据需要添加更多的文件夹，比如 styles、utils 或 services。Vite 不会对你指手画脚。
第四步：自定义你的 Vite 配置
打开 vite.config.js，我们来添加一些设置：
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
server: {
port: 3000,
},
build: {
outDir: "dist",
sourcemap: true,
},
});
这个配置设置了开发服务器端口、构建输出目录，并启用了源映射。还有很多其他的方式可以配置 Vite，以满足你的需求！
第五步：添加一些代码并见证奇迹
让我们创建一个新组件，看看 Vite 的 HMR（模块热替换）是如何工作的。创建一个新文件 src/Hello.jsx：
import { useState } from "react";
export default function Hello() {
const [name, setName] = useState("World");
return (
<div>
<h1>Hello, {name}!</h1>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Enter a name"
/>
</div>
);
}
现在，在 App.jsx 中导入并使用这个组件：
import { useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "../public/vite.svg";
import "./App.css";
import Hello from "./Hello.jsx";
function App() {
const [count, setCount] = useState(0);
return (
<>
<Hello />
<div>
<a href="https://vitejs.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.jsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</>
);
}
export default App;
保存这些文件，看看 Vite 如何比你说出“为什么我没早点切换到 Vite？”还快地更新你的应用！
Vite 的一些酷炫功能
Vite 不止于此，它有很多很棒的功能：
- 静态资源？搞定：Vite 会自动优化你的图片和其他资源。
-
环境变量？没问题：使用
.env文件可以轻松管理不同环境。 - 插件？应有尽有：需要更多功能？可能已经有插件了。
- CSS 预处理器？当然可以：想用 Sass？安装并直接使用，Vite 会帮你搞定一切。
添加 Sass 到 Vite 的示例
运行以下命令安装 Sass：
npm install --save-dev sass
在 src 文件夹中创建一个名为 App.scss 的文件，并添加一些代码，例如：
$awesome-color: #ff69b4;
.card {
color: $awesome-color;
}
更新 App.jsx，导入这个新的 Sass 文件：
import './App.scss';
总结：Vite 超棒！
- 速度很重要——Vite 的开发服务器如此之快，以至于你会忘记曾经还需要刷新页面。
- 设置简单——只需一个简单的命令，你就可以启动一个准备就绪的项目。
- 框架无关——无论你使用 React、Vue、Svelte、Preact、Solid、Qwik，或者只是喜欢使用纯 JavaScript，Vite 都能支持你。
- 生产就绪——Rollup 优化确保你的代码尽可能精简和高效。
现在，去构建一些令人惊叹的东西吧！Vite 出发！
