Frontend Academy · 课时

Vite：开发服务器与构建

Q: 「Vite：开发服务器与构建」这节课中我会学到什么？

启动 Vite 项目，使用其即时 HMR 开发服务器，运行构建命令，并预览生产环境输出。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

启动 Vite 项目，使用其即时 HMR 开发服务器，运行构建命令，并预览生产环境输出。

Vite：开发服务器与构建 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

什么是 Vite？

Vite 是由 Evan You（Vue 的创建者）创建的新一代前端构建工具。它使用原生 ESM 和 esbuild 提供极快的开发服务器，并通过 Rollup 提供生产环境构建。

创建 Vite 项目

npm create vite@latest 会搭建一个新项目。请选择框架（Vanilla、React、Vue、Svelte、Preact 或 Lit）和变体（JS 或 TS）。项目会立即准备就绪，无需任何配置。

npm create vite@latest my-app
# Choose: React + TypeScript

cd my-app
npm install
npm run dev  # dev server on localhost:5173

开发服务器——即时启动

Vite 在开发过程中不会进行打包，而是将每个文件作为原生 ESM 模块提供。浏览器会直接导入这些模块。不进行打包意味着无论项目大小如何，冷启动时间都低于 100 毫秒。HMR 只会重新编译发生变化的文件。

HMR——热模块替换

Vite 的 HMR 只会替换运行中应用里发生变化的模块，而不会完整重新加载页面。对于使用 @vitejs/plugin-react 的 React 应用，组件状态会在 HMR 过程中保留。更改会在 50 毫秒以内显示。

vite.config.js / vite.config.ts

Vite 使用 vite.config.ts 文件进行配置。常见选项包括：插件、解析别名、服务器端口、用于 API 调用的代理，以及构建输出目录。

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: { '@': '/src' },
  },
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8080',
    },
  },
});

环境变量

Vite 会通过 import.meta.env 暴露带有 VITE_ 前缀的环境变量。请将它们存储在 .env、.env.development 和 .env.production 中。切勿为机密信息添加 VITE_ 前缀，因为它们会被包含在浏览器构建包中。

# .env
VITE_API_URL=https://api.example.com

# In code:
const apiUrl = import.meta.env.VITE_API_URL;

npm run build——生产环境构建

npm run build 会在底层调用 Rollup，对应用进行打包、压缩和树摇。输出会写入 dist/ 文件夹，可直接用于部署。

npm run build
# Output:
# dist/
#   index.html
#   assets/
#     index-a1b2c3.js  (minified app bundle)
#     vendor-d4e5f6.js  (node_modules chunk)
#     index-7h8i9j.css

分析构建包

使用 vite-bundle-visualizer 或 rollup-plugin-visualizer 生成构建包内容的矩形式图表。这有助于找出过大的依赖，以及可以进行延迟加载的地方。

npm run preview

npm run preview 会在本地提供生产环境的 dist/ 构建结果。部署前请使用它验证生产环境构建，因为它可以发现仅在应用不处于开发模式时才会出现的问题。

Vite 中的代码分割

动态 import() 语句会自动创建独立的代码块。React Router 的延迟路由和 Vue 的 defineAsyncComponent 也会触发分割。请在构建输出中检查代码块大小。

用于构建库的 Vite

Vite 的库模式（build.lib）用于构建 npm 库，并同时输出 ESM 和 CJS 格式。请指定外部依赖列表，以免将 React 等同级依赖打包进去。

快速检查

为什么 Vite 的开发服务器比 webpack 更快？

回顾：Vite

npm create vite@latest 可以立即搭建项目。开发服务器使用原生 ESM——无需打包，并可立即进行 HMR。vite.config.ts 用于配置插件、别名和代理。VITE_ 前缀用于浏览器安全的环境变量。npm run build 会生成经过优化的 Rollup 构建包。npm run preview 会在本地测试生产环境构建。

常见问题解答

「Vite：开发服务器与构建」课时是免费的吗？

是的 — 「Vite：开发服务器与构建」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「Vite：开发服务器与构建」这节课中我会学到什么？

启动 Vite 项目，使用其即时 HMR 开发服务器，运行构建命令，并预览生产环境输出。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「Vite：开发服务器与构建」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy