05.1
为什么需要构建
现代前端用 TS/JSX/SCSS、ESM 模块、npm 依赖，浏览器无法直接高效运行。构建工具负责转译、打包、压缩、优化，产出可部署的静态资源。
| 阶段 | 做什么 |
|---|---|
| 转译 | TS→JS、JSX→JS、新语法降级 |
| 打包 | 模块合并、处理依赖 |
| 优化 | 压缩、Tree-shaking、代码分割 |
05.2
npm scripts
把常用命令写进 package.json 的 scripts，统一入口、可复现，避免团队各记各的命令。
{
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
}
}05.3
Vite 开发
Vite 用原生 ESM 做开发服务器，按需编译，启动与冷启动极快；生产构建用 Rollup，输出高度优化的包。
// vite.config.ts
import { defineConfig } from 'vite';
export default defineConfig({
server: { port: 5173 },
build: { outDir: 'dist', sourcemap: true }
});Vite vs Webpack
新项目首选 Vite：开发体验更好、配置更少。Webpack 生态更庞大、定制能力强，存量项目仍常见。
05.4
打包与产物
构建产出 HTML/JS/CSS 资源，带内容哈希便于缓存。理解产物结构有助于排查体积与加载问题。
dist/
index.html
assets/index-a1b2c3.js
assets/index-d4e5f6.css05.5
HMR 热更新
Hot Module Replacement 在改代码后只替换变化的模块，保留页面状态，无需整页刷新，开发飞快。
状态为何保留
框架与 HMR 协作，只重新执行变化的模块并复用其余状态。若组件含副作用，需在钩子里做清理以配合热替换。
05.6
Tree-shaking
基于 ESM 的静态分析，摇掉未被引用的导出代码，减小包体积。前提是模块用 import/export 且副作用可控。
// 只导入用到的函数，未用的不会进包
import { debounce } from 'lodash-es';副作用声明
在 package.json 标注 "sideEffects": false（或具体文件列表），工具才敢放心摇树。含全局样式的文件要排除。
05.7
环境变量
用 .env 与 import.meta.env（Vite）注入不同环境配置；敏感变量只在服务端使用，别打包进前端。
# .env
VITE_API_BASE=/api
# 只有 VITE_ 前缀的变量会暴露给前端05.8
常见陷阱与 FAQ
可能引入了整个库（如 import _ from 'lodash'）。改按需导入、用分析插件（rollup-plugin-visualizer）定位大模块、做代码分割。
Vite 只暴露 VITE_ 前缀变量到前端；且变量在构建期内联，运行时改 env 需重新构建。
检查 accept 边界与模块副作用；某些全局样式或单例状态需手动处理热替换逻辑。
05.9