软件技术 · 知识点深化 · 前端工程化
前端构建工具：Webpack、Vite、Tree Shaking、Loader
前端代码要经过打包、转译、压缩、拆包才能上线。Webpack 用 Loader 和 Plugin 做全流程，Vite 用浏览器原生 ESM 开发秒启。这一页讲透构建流程、Tree Shaking、热更新。
① 怎么学（4 步走，约 65 分钟）
先建立直觉再抠细节，按这四步走最稳：
1看图建立直觉（10 分钟）
读②③：先在脑子里画出本课核心结构图。
2记完整体系（15 分钟）
读④：把对比表和公式看懂，不要急着背。
3跟例题走一遍（20 分钟）
精读⑤：看三个例题怎么用知识点解题。
4刷题纠错（剩余时间）
做⑦⑩，错题回⑥诊断。
本课小目标学完你要能：① 说 Webpack 构建流程；② 对比 Webpack/Vite；③ 解释 Tree Shaking；④ 配置代码拆分。
② 一图看懂：前端构建全景
读法：中心是本课主题，四条分支展开核心维度，下方是典型应用与高频易错点。
③ 本质直觉：构建就是"料理食材"
你写的是 .vue/.ts/.scss 文件，浏览器看不懂。构建工具像厨房：把食材（源码）洗切炒（转译）、打包成菜（bundle）端给浏览器。
Webpack：从入口开始递归找依赖，每个文件用对应 Loader 转译（babel 转 ES5、sass 转 css），Plugin 在生命周期做额外事（压缩、抽离 CSS）。
Vite：开发环境不打包，浏览器原生 ESM 按需加载，秒启。生产用 Rollup 打包。
Tree Shaking：删掉没用到的 export 代码，减小体积。依赖 ES Module 静态结构。
代码分割把 vendor（react）和业务代码分开，路由懒加载。用户首屏只加载必要代码。
④ 完整知识体系
Webpack vs Vite
| 维度 | Webpack | Vite |
|---|
| 开发启动 | 冷启动慢（全打包） | 秒启（ESM） |
| 热更新 | 随项目变大变慢 | 快 |
| 生产打包 | Webpack | Rollup |
| 配置 | 复杂 | 简单 |
| 生态 | 成熟 | 快速成长 |
Tree Shaking依赖 ES Module import/export 静态分析，删未引用代码
代码分割splitChunks 抽公共包，动态 import 懒加载路由
Loader vs Plugin
Loader 转译单个文件（babel-loader、css-loader）。Plugin 跑生命周期钩子，做整体事（HtmlWebpackPlugin、压缩）。
⑤ 应用场景与例题
例1 为什么 Vite 开发启动快？
开发环境不打包，浏览器请求哪个模块就实时编译哪个，利用原生 ESM。Webpack 要先全量打包。
例2 Tree Shaking 为什么要用 ES Module？
import/export 是静态的，编译期能分析依赖。CommonJS require 动态，分析不了。
例3 首屏加载慢怎么优化？
路由懒加载动态 import、vendor 抽离、gzip、Tree Shaking。
做题心法构建 = 依赖图 + Loader 转译 + Plugin 增强 + 输出优化。
⑥ 高频错误诊断（4 条）
错误1：生产不压缩代码体积大，加载慢。
错误2：所有代码打一个包改一行业务代码整个 vendor 重新下载。
错误3：用 CommonJS 导致 Tree Shaking 失效用 ES Module。
错误4：忽视 source map 生产配置可能泄露源码。
⑦ 考点真题演练（5 题）
考点分布
| 考法 | 出题形式 | 应对 |
|---|
| 流程 | 问 Webpack 步骤 | 依赖图+Loader+Plugin |
| Loader/Plugin | 问区别 | 转译文件 vs 生命周期 |
| Vite | 问为什么快 | 原生 ESM |
| Tree Shaking | 问前提 | ES Module |
真题basic1. Vite 开发环境启动快是因为？
真题mid2. Tree Shaking 依赖？
真题mid3. Loader 的作用是？
真题hard4. 代码分割中动态 import 做什么？
真题hard5. Webpack Plugin 和 Loader 区别？
⑧ 必背知识点卡
流程：入口 -> 依赖图 -> Loader -> Plugin -> 输出
Loader：转译单文件 babel/sass
Plugin：生命周期钩子 压缩/html
Vite：开发 ESM 秒启，生产 Rollup
Tree Shaking：删未用代码，要 ES Module
代码分割：vendor 抽离+路由懒加载
HMR：热替换局部模块不刷新整页
⑨ 动手输出：优化前端首屏加载
场景：首屏 5MB 加载 5 秒，怎么优化？
① 分析：用 webpack-bundle-analyzer 看体积。
② 拆分：vendor 单独打，路由懒加载。
③ 瘦身：Tree Shaking、按需引入 UI 库。
④ 压缩：gzip/brotli、图片压缩。
⑤ 缓存：vendor 加 hash 长缓存。
口述思路先分析体积，再拆分压缩缓存。
⑩ 分层练习（基础 + 中档 + 拔高）
▍基础 6 题
基础1Webpack 入口是什么？
从哪个文件开始构建依赖图。
基础3Vite 开发为什么快？
原生 ESM 不打包。
基础4Tree Shaking 作用？
删未引用代码。
▍中档 5 题
中档1为什么生产和开发配置不同？
开发要 source map 和 HMR；生产要压缩优化。
中档2babel-loader 干什么？
ES6+ 转 ES5 兼容浏览器。
中档3splitChunks 干什么？
抽离公共依赖到单独 chunk。
中档4为什么用 ES Module 才能 Tree Shaking？
静态结构编译期能分析。
中档5Vite 生产为什么用 Rollup？
Rollup 输出更干净适合库。
▍拔高 5 题
拔高1source map 生产怎么配？
hidden-source-map 只上传错误监控，不公开。
拔高2缓存 hash 策略？
内容变了 hash 才变，长缓存 vendor。
拔高3热更新原理？
WebSocket 通知浏览器替换模块。
拔高4为什么 CommonJS 不能 Tree Shaking？
require 动态，运行时才知道依赖。
拔高5预加载/preload 区别？
preload 当前页面必需；prefetch 未来可能用。
⑪ 记忆口诀 + 7 天复习计划
三句口诀① 入口依赖图，Loader 转译 Plugin 增强。② Vite 秒启靠 ESM，Tree Shaking 要 ES Module。③ 拆分压缩加缓存，首屏秒开。
| 天 | 任务 | 自检 |
|---|
| 第 1 天 | 读②③，画 Webpack 流程 | 五步说清 |
| 第 2 天 | 背 Loader/Plugin + 基础 6 题 | 概念记住 |
| 第 3 天 | 做中档 5 题，配置一个 vite 项目 | 能跑 |
| 第 4 天 | 做拔高 5 题，分析 bundle | 会用 analyzer |
| 第 5 天 | 做⑦真题 5 题 | 限时每题 2 分钟 |
| 第 6-7 天 | 合书口述 Tree Shaking 原理 | 不看资料 |
← 返回软件技术总览