使用 Vite 极快速度构建 Web 应用

前端构建过程已经慢且复杂了太长时间了。无论你是在使用 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 出发！