TANG / LABBUILD · LEARN · SHIP开始学习
首页/框架/第 7 课

模块 07 · 工程化 · MODULE 07

构建与工作区：看懂代码如何变成产品

以 Vite 8.1 与 Rolldown 为主线看懂依赖图、开发服务器、生产构建和插件机制，再把应用、组件库和共享配置组织成可扩展工作区。

进阶6 小时9 个核心主题

WHY IT MATTERS

先用一句白话理解

构建工具像物流中心：开发时让需要的包裹快速到手，发布时重新分箱、压缩并贴好长期缓存标签。

LEARNING OUTCOMES

学完你能做到什么

01

理解 ESM、依赖图、Tree Shaking 与 Code Splitting

02

配置 Vite 8.1 的开发、构建、环境变量和插件

03

理解 Rolldown、Turbopack 与框架构建层的关系

04

组织应用、组件库与共享配置的工作区

05

能用数据分析慢启动、大产物和重复依赖

CONCEPT DEEP DIVE

把每个核心概念讲透

不要把知识点当作名词列表。下面每一项都要回到真实项目中回答：它解决什么问题，如何验证，以及在哪些条件下会失效。

01CORE CONCEPT

ES Modules 与包导出

先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“搭建一个包含组件库、React 示例、Vue 示例和共享配置的前端 Monorepo。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。

验证方式用最小示例、Profiler、测试和构建产物验证机制：完成“把一个旧式单页应用迁移到 Vite”，记录现象、预期、差异和结论。
02CORE CONCEPT

依赖图与 Tree Shaking

先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“搭建一个包含组件库、React 示例、Vue 示例和共享配置的前端 Monorepo。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。

验证方式用最小示例、Profiler、测试和构建产物验证机制：完成“配置路由级分包、Source Map 和产物分析”，记录现象、预期、差异和结论。
03CORE CONCEPT

Vite 8.1 与 Rolldown

先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“搭建一个包含组件库、React 示例、Vue 示例和共享配置的前端 Monorepo。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。

验证方式用最小示例、Profiler、测试和构建产物验证机制：完成“建立应用与组件库共享的 TypeScript 工作区”，记录现象、预期、差异和结论。
04CORE CONCEPT

HMR 与开发服务器

先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“搭建一个包含组件库、React 示例、Vue 示例和共享配置的前端 Monorepo。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。

验证方式用最小示例、Profiler、测试和构建产物验证机制：完成“记录一次构建性能基线与优化结果”，记录现象、预期、差异和结论。
05CORE CONCEPT

Code Splitting

先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“搭建一个包含组件库、React 示例、Vue 示例和共享配置的前端 Monorepo。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。

验证方式用最小示例、Profiler、测试和构建产物验证机制：完成“把一个旧式单页应用迁移到 Vite”，记录现象、预期、差异和结论。
06CORE CONCEPT

环境变量与插件

先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“搭建一个包含组件库、React 示例、Vue 示例和共享配置的前端 Monorepo。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。

验证方式用最小示例、Profiler、测试和构建产物验证机制：完成“配置路由级分包、Source Map 和产物分析”，记录现象、预期、差异和结论。
07CORE CONCEPT

Library Mode

先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“搭建一个包含组件库、React 示例、Vue 示例和共享配置的前端 Monorepo。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。

验证方式用最小示例、Profiler、测试和构建产物验证机制：完成“建立应用与组件库共享的 TypeScript 工作区”，记录现象、预期、差异和结论。
08CORE CONCEPT

Monorepo 与 CI 缓存

先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“搭建一个包含组件库、React 示例、Vue 示例和共享配置的前端 Monorepo。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。

验证方式用最小示例、Profiler、测试和构建产物验证机制：完成“记录一次构建性能基线与优化结果”，记录现象、预期、差异和结论。
09CORE CONCEPT

存量构建迁移

先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“搭建一个包含组件库、React 示例、Vue 示例和共享配置的前端 Monorepo。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。

验证方式用最小示例、Profiler、测试和构建产物验证机制：完成“把一个旧式单页应用迁移到 Vite”，记录现象、预期、差异和结论。

CONCEPT MAP

这一章的学习步骤

1ES Modules 与包导出
2依赖图与 Tree Shaking
3Vite 8.1 与 Rolldown
4HMR 与开发服务器
5Code Splitting
6环境变量与插件
7Library Mode
8Monorepo 与 CI 缓存
9存量构建迁移
STEP 01

把一个旧式单页应用迁移到 Vite

STEP 02

配置路由级分包、Source Map 和产物分析

STEP 03

建立应用与组件库共享的 TypeScript 工作区

STEP 04

记录一次构建性能基线与优化结果

HANDS-ON PROJECT

动手任务

PROJECT BRIEF

搭建一个包含组件库、React 示例、Vue 示例和共享配置的前端 Monorepo。

交付清单

  • ✓可发布的组件库构建
  • ✓产物体积与依赖分析报告
  • ✓CI 构建缓存和升级说明

MINIMUM RUNNABLE CODE

Vite 8.1 的最小生产构建配置

ts
import { defineConfig } from "vite";

export default defineConfig({
  build: {
    sourcemap: true,
    target: "es2022",
  },
  server: {
    port: 5173,
  },
});

先让它跑起来，再逐行修改。最有效的学习方式，是观察你的改动如何影响结果。

DELIBERATE PRACTICE

三级练习：从复现到生产

每一级都比上一级少一点提示、多一点约束。只有在不看答案也能完成验收时，知识才真正变成能力。

01
LEVEL 1 · 基础复现

让核心机制第一次跑通

  • 把一个旧式单页应用迁移到 Vite
  • 配置路由级分包、Source Map 和产物分析
  • 建立应用与组件库共享的 TypeScript 工作区
  • 记录一次构建性能基线与优化结果
02
LEVEL 2 · 独立改造

改变约束，验证你真的理解

  • 不看教程，独立完成：理解 ESM、依赖图、Tree Shaking 与 Code Splitting
  • 不看教程，独立完成：配置 Vite 8.1 的开发、构建、环境变量和插件
  • 不看教程，独立完成：理解 Rolldown、Turbopack 与框架构建层的关系
  • 不看教程，独立完成：组织应用、组件库与共享配置的工作区
  • 不看教程，独立完成：能用数据分析慢启动、大产物和重复依赖
03
LEVEL 3 · 生产挑战

把实验变成能交付的工程

  • 可发布的组件库构建
  • 产物体积与依赖分析报告
  • CI 构建缓存和升级说明
  • 检查缓存、Hydration、错误恢复、可观测性和部署约束，并把检查结果写进项目复盘。

COMMON PITFALLS

最容易踩的坑

01

把开发服务器速度等同于生产页面性能

02

将密钥放进会被替换到客户端的环境变量

03

为了一个小工具引入整套大型依赖而不检查 Tree Shaking

04

把 Vite 8.1 的实验 Bundled Dev Mode 当作默认稳定能力

SELF CHECK

先回答，再展开参考答案

Q01这一课最核心的业务目标是什么？＋

以 Vite 8.1 与 Rolldown 为主线看懂依赖图、开发服务器、生产构建和插件机制，再把应用、组件库和共享配置组织成可扩展工作区。

Q02如果只能保留三个验收结果，应该保留什么？＋

可发布的组件库构建；产物体积与依赖分析报告；CI 构建缓存和升级说明

Q03学习过程中最需要主动避免什么？＋

把开发服务器速度等同于生产页面性能；将密钥放进会被替换到客户端的环境变量；为了一个小工具引入整套大型依赖而不检查 Tree Shaking；把 Vite 8.1 的实验 Bundled Dev Mode 当作默认稳定能力

Q04怎样证明你不是“看懂了”，而是真的会做？＋

独立完成“搭建一个包含组件库、React 示例、Vue 示例和共享配置的前端 Monorepo。”，并用测试、数据或运行结果逐项验收交付清单。

PRODUCTION READINESS

本课完成检查表

全部能打勾，再进入下一课。

  • □目标明确：理解 ESM、依赖图、Tree Shaking 与 Code Splitting
  • □核心机制已用最小实验验证：把一个旧式单页应用迁移到 Vite
  • □风险已检查：把开发服务器速度等同于生产页面性能
  • □风险已检查：将密钥放进会被替换到客户端的环境变量
  • □风险已检查：为了一个小工具引入整套大型依赖而不检查 Tree Shaking
  • □风险已检查：把 Vite 8.1 的实验 Bundled Dev Mode 当作默认稳定能力
  • □交付物可复现：可发布的组件库构建
  • □交付物可复现：产物体积与依赖分析报告
  • □交付物可复现：CI 构建缓存和升级说明

PRIMARY SOURCES

继续深入的官方资料

Vite 官方指南Vite 8 与 Rolldown 官方发布说明Vite 8.1 官方发布说明

课程版本基线：2026 年 7 月。涉及版本号时，以链接中的官方文档为最终依据。