前端工程化学习笔记

适合目标：6 小时内快速建立前端工程化知识框架，覆盖 Webpack 核心、Vite 原理、性能优化、高频面试题与实战排查思路。
学习重点：构建流程、模块打包、Loader 与 Plugin、Vite 为什么快、代码分割、缓存策略、资源加载优化。
学习原则：先理解“工程化到底在解决什么”，再记工具名词；先掌握主流程，再背配置；先会讲链路，再会答面试。

1. 学习总览

1.1 什么叫前端工程化

前端工程化，本质上不是某一个工具，而是：

把前端开发从“手工写页面”升级为“标准化、自动化、可维护、可部署的一套工程体系”。

也就是说，它要解决的不只是“代码能跑”，而是下面这些问题：

代码怎么组织
模块怎么拆分
新语法和新特性怎么兼容
开发时怎么快速启动和热更新
打包后怎么更小、更快、更稳定
上线后怎么缓存、怎么回滚、怎么持续部署

1.2 你可以把工程化理解成一条流水线

前端工程化可以抽象成这样一条链路：

源码编写 -> 模块解析 -> 语法转换 -> 资源处理 -> 打包输出 -> 性能优化 -> 部署上线

这条链路里的每一步，工程化工具都在帮你做自动化处理。

1.3 学习主线

主线 1：Webpack 解决“项目怎么被构建出来”

从哪里开始打包
模块如何形成依赖图
不同类型文件怎么处理
打包过程中如何扩展能力

主线 2：Vite 解决“开发阶段为什么能更快”

为什么启动快
为什么热更新快
为什么生产构建又不用自己重新发明一套打包器

主线 3：性能优化解决“项目上线后怎么更快”

代码怎么拆
包体积怎么减
网络资源怎么压缩和缓存
首屏怎么更快

1.4 核心记忆主线

把前端工程化记成一句话：

开发效率靠构建工具，生产性能靠优化策略，长期维护靠规范和自动化。

再压缩成三个关键词：

构建、优化、交付

2. 工程化到底在解决什么

2.1 没有工程化时会遇到什么问题

如果没有工程化，前端项目会很容易出现这些情况：

多个文件通过手动 script 标签引入，依赖顺序容易错
CSS、图片、字体等资源缺少统一管理
ES6+、TypeScript、JSX 等语法浏览器不能直接兼容
每次改代码都要手动刷新页面
上线资源文件名不稳定，缓存控制困难
团队代码风格不统一，质量无法保障

2.2 工程化包含哪些能力

前端工程化通常包含下面几类能力：

能力	作用	常见工具
模块化	把代码拆成独立模块	ESM、CommonJS
构建打包	把模块和资源组织输出	Webpack、Vite、Rollup
编译转换	把新语法转成旧环境可运行代码	Babel、TypeScript、SWC、esbuild
开发提效	启动服务、热更新、代理接口	Webpack Dev Server、Vite Dev Server
代码规范	统一风格、减少低级错误	ESLint、Prettier、Stylelint
自动测试	保证功能稳定	Jest、Vitest、Cypress
持续集成部署	自动构建、自动发布	GitHub Actions、Jenkins、GitLab CI

2.3 面试里怎么概括工程化

标准表达可以这样说：

前端工程化是围绕开发、构建、测试、发布整条链路建立标准化和自动化流程，目标是提升开发效率、保证代码质量、优化线上性能并降低协作成本。

2.4 记忆口诀

工程化不只是打包，而是把开发到上线全流程标准化。

3. Webpack 核心

Webpack 是前端工程化里最经典、最常考的构建工具。学 Webpack，不是死记配置，而是要理解“它如何从入口开始，把所有模块处理后打成产物”。

3.1 Webpack 是什么

Webpack 的一句话定义：

Webpack 是一个静态模块打包器。

拆开理解：

模块：JavaScript、CSS、图片、字体都可以看成模块
静态：在构建阶段分析依赖关系，而不是运行时临时扫描
打包器：把模块整理、转换、合并、输出成浏览器可加载的资源

3.2 Webpack 核心流程

Webpack 的工作流程可以记成：

Entry -> Dependency Graph -> Loader -> Plugin -> Chunk -> Output

展开来看：

从 Entry 入口文件开始
分析入口依赖，递归构建依赖图
遇到不同资源，用 Loader 做转换
在构建生命周期中，通过 Plugin 扩展功能
根据规则把模块组织成不同 Chunk
最终生成打包产物到 Output

3.3 四个最高频核心概念

概念	作用	面试高频点
Entry	依赖图起点	多入口配置
Output	打包输出配置	文件名 hash 策略
Loader	处理非 JS 资源或语法转换	自定义 Loader
Plugin	扩展 Webpack 功能	自定义 Plugin

3.4 Entry

3.4.1 Entry 是什么

entry 是 Webpack 构建依赖图的起点。

Webpack 会从入口文件出发，递归分析它依赖的模块，再继续向下找依赖，最终形成整个项目的依赖图。

3.4.2 单入口和多入口

单入口：

module.exports = {
  entry: "./src/main.js",
};

多入口：

module.exports = {
  entry: {
    app: "./src/app.js",
    admin: "./src/admin.js",
  },
};

3.4.3 多入口适合什么场景

多页面应用
后台管理与用户端分离
不同业务模块独立构建

3.4.4 面试答法

问：Webpack 的 entry 有什么作用？

可以答：

entry 是 Webpack 构建依赖图的起点。Webpack 会从入口文件出发递归分析所有依赖模块，并最终生成对应的 chunk 和输出资源。

3.5 Output

3.5.1 Output 是什么

output 用来指定打包结果输出到哪里，以及输出文件怎么命名。

示例：

const path = require("path");

module.exports = {
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].[contenthash:8].js",
    clean: true,
  },
};

3.5.2 常见文件名占位符

[name]：入口名或 chunk 名
[hash]：整个构建级别 hash
[chunkhash]：chunk 级别 hash
[contenthash]：文件内容级别 hash

3.5.3 为什么推荐 contenthash

因为它和文件内容直接相关：

文件内容不变，hash 不变
更有利于浏览器长期缓存
避免一个文件改动导致全部资源 hash 变化

3.5.4 面试答法

问：hash、chunkhash、contenthash 的区别是什么？

可以这样回答：

hash 是整个项目构建级别的 hash，任意文件变化都可能导致所有资源 hash 改变
chunkhash 以 chunk 为单位生成 hash，某个 chunk 内容变了才会影响对应 chunk
contenthash 以文件内容为粒度，更细，更适合静态资源长期缓存

3.6 Loader

3.6.1 Loader 是什么

Webpack 默认只认识 JavaScript 和 JSON。

如果你在项目里写了：

CSS
Less / Sass
TypeScript
JSX
图片资源

Webpack 不能天然直接处理，就需要 Loader 把这些资源转成它能理解的模块。

3.6.2 Loader 的本质

Loader 本质上是一个函数，输入源内容，输出转换后的内容。

也可以把它理解成：

文件转换器

3.6.3 常见 Loader

Loader	作用
`babel-loader`	把 ES6+ 转成兼容代码
`ts-loader`	处理 TypeScript
`style-loader`	把 CSS 通过 style 标签注入页面
`css-loader`	解析 CSS 中的 `@import` 和 `url()`
`sass-loader`	处理 Sass/SCSS
`less-loader`	处理 Less
`postcss-loader`	做自动前缀、兼容性处理

3.6.4 Loader 执行顺序

Loader 默认是：

从右到左，从下到上执行

例如：

use: ["style-loader", "css-loader", "sass-loader"];

执行顺序是：

sass-loader
css-loader
style-loader

原因是先把 Sass 变 CSS，再把 CSS 解析成模块，最后注入页面。

3.6.5 面试答法

问：Loader 和 Plugin 的区别是什么？

标准答法：

Loader 主要用于对模块内容进行转换，本质是文件转换器
Plugin 作用于整个 Webpack 构建生命周期，用来扩展更广泛的能力
Loader 更偏向“处理某一类资源”，Plugin 更偏向“干预整个构建过程”

3.7 Plugin

3.7.1 Plugin 是什么

如果说 Loader 是处理“文件内容”的，那么 Plugin 处理的是“整个构建过程”。

例如：

生成 HTML 文件
抽离 CSS
清理输出目录
注入环境变量
压缩代码
分析构建结果

这些都更适合由 Plugin 完成。

3.7.2 Plugin 的本质

Webpack 在内部有一整套生命周期钩子。

Plugin 的本质就是：

在 Webpack 不同生命周期节点上注册逻辑，扩展构建能力。

3.7.3 常见 Plugin

Plugin	作用
`HtmlWebpackPlugin`	自动生成 HTML 并注入打包资源
`MiniCssExtractPlugin`	抽离 CSS 到单独文件
`DefinePlugin`	注入全局常量
`CopyWebpackPlugin`	复制静态资源
`BundleAnalyzerPlugin`	分析包体积

3.7.4 自定义 Plugin 核心结构

class MyPlugin {
  apply(compiler) {
    compiler.hooks.done.tap("MyPlugin", () => {
      console.log("build finished");
    });
  }
}

记忆点：

必须有 apply
apply 接收 compiler
在对应 hooks 上注册逻辑

3.8 Module、Chunk、Bundle 的区别

这是 Webpack 里很容易混淆的三个词。

3.8.1 Module

Module 是单个模块。

比如：

一个 js 文件
一个 css 文件
一张图片

都可以经过处理后成为模块。

3.8.2 Chunk

Chunk 是模块的组合，是 Webpack 根据依赖关系、入口和拆包规则形成的一组模块集合。

3.8.3 Bundle

Bundle 是最终输出到磁盘上的文件结果。

3.8.4 一句话区分

Module 是单元，Chunk 是分组，Bundle 是产物。

3.9 代码分割

代码分割是 Webpack 性能优化里的高频考点。

3.9.1 为什么要做代码分割

如果所有代码都打到一个大文件里，会有问题：

首屏加载慢
某个页面根本不会用到的代码也被提前加载
缓存利用率差

3.9.2 常见代码分割方式

多入口拆分
动态导入拆分
splitChunks 提取公共依赖

动态导入示例：

button.addEventListener("click", async () => {
  const module = await import("./dialog.js");
  module.openDialog();
});

3.9.3 `splitChunks` 作用

主要用来：

提取公共模块
把第三方库单独打包
减少重复代码

3.10 HMR 热更新

3.10.1 HMR 是什么

HMR 全称是 Hot Module Replacement，即热模块替换。

它的作用是：

在不刷新整个页面的情况下，只替换发生变化的模块。

3.10.2 好处

保留页面状态
提升开发效率
减少完整重载带来的等待时间

3.10.3 不是所有修改都能“无感替换”

要注意：

样式文件通常支持较好
JavaScript 模块需要看具体框架和运行时接入
某些改动可能仍会退化为整页刷新

3.11 一份最小可理解的配置

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "production",
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].[contenthash:8].js",
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: "babel-loader",
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [new HtmlWebpackPlugin()],
};

看这份配置时，你要能立刻说出：

从哪开始打包
输出到哪里
JS 怎么转译
CSS 怎么处理
HTML 怎么生成

3.12 Webpack 记忆压缩版

把 Webpack 压缩成一句话：

Webpack 从入口出发建立依赖图，用 Loader 转换模块，用 Plugin 扩展构建过程，最后按规则输出资源。

4. Vite 原理

Vite 是现代前端开发里非常高频的构建工具。面试真正想问的不是“你用过没有”，而是“你知不知道它为什么快”。

4.1 Vite 是什么

Vite 是一个现代前端构建工具，它有两个明显特点：

开发环境非常快
生产构建基于成熟打包能力

4.2 Vite 为什么快

Vite 快，核心在于它把“开发阶段”和“生产构建阶段”分开处理了。

开发阶段

Vite 利用浏览器原生支持 ESM，不再像传统打包器那样一启动就把整个项目全部打包一遍。

它的思路是：

浏览器请求哪个模块
开发服务器就按需返回哪个模块
需要转换时，再即时编译

这就是它启动快的根本原因。

生产阶段

生产环境仍然需要：

合并资源
压缩代码
做 Tree Shaking
产出稳定资源

所以 Vite 在生产构建阶段使用 Rollup。

4.3 Vite 开发阶段原理

4.3.1 原生 ESM

浏览器支持：

<script type="module" src="/src/main.js"></script>

于是 Vite 可以不预先把所有模块打成一个 bundle，而是直接让浏览器按模块请求。

4.3.2 按需编译

只有当浏览器请求某个模块时，Vite 才会对该模块做转换并返回结果。

这和传统打包器“启动先全部打包”的方式很不一样。

4.3.3 依赖预构建

问题来了：

虽然业务代码可以走原生 ESM，但第三方依赖经常存在这些问题：

可能是 CommonJS
依赖层级深，请求过多
包体结构不适合浏览器直接高效加载

所以 Vite 会做 依赖预构建。

4.3.4 预构建在干什么

它通常会把第三方依赖：

转成浏览器更友好的 ESM 格式
把碎片化依赖做一定合并
提升首次启动与页面加载速度

Vite 的依赖预构建通常借助 esbuild，这也是它非常快的重要原因之一。

4.4 Vite 生产构建为什么用 Rollup

Rollup 的优势在于：

对 ESM 支持非常好
Tree Shaking 能力成熟
产物更适合库和现代前端应用
插件生态清晰

所以 Vite 的策略可以记成：

开发时走原生 ESM + esbuild，生产时走 Rollup。

4.5 Vite 的 HMR 为什么快

传统打包器更新时，可能需要重新构建较大范围模块。

Vite 的思路更轻：

维护模块依赖图
文件变化后，只定位受影响的模块边界
将更新模块推送给浏览器
浏览器只重新请求相关模块

因此，Vite 的热更新一般比传统整包重构更快。

4.6 Vite 插件系统

Vite 的插件系统和 Rollup 有较高兼容性，所以很多插件理念是相通的。

这意味着：

开发和构建扩展能力都比较强
很多 Rollup 插件思维可以迁移过来
学会一个体系，能理解两个工具

4.7 Vite 和 Webpack 对比

维度	Webpack	Vite
开发启动	通常先构建，项目大时较慢	基于原生 ESM，启动快
热更新	依赖具体构建和框架接入	模块级更新，通常更快
生产构建	Webpack 自己完成	通常基于 Rollup
配置复杂度	功能强但配置偏重	默认体验更轻
适合场景	历史项目、复杂定制、大型工程	现代项目、快速开发

4.8 面试答法

问：Vite 为什么比 Webpack 快？

可以这样答：

核心原因是 Vite 在开发阶段利用浏览器原生 ESM，不需要启动时对整个项目做完整打包，而是按需编译和按需加载模块。同时它会用 esbuild 预构建第三方依赖，所以冷启动和热更新通常都更快。生产环境则交给 Rollup 做正式构建。

4.9 记忆口诀

Webpack 先打后看，Vite 边请求边处理。

再进一步压缩：

开发靠 ESM，依赖靠 esbuild，生产靠 Rollup。

5. 性能优化清单

工程化学习到最后，一定要落到性能优化。面试里真正有价值的回答，不是“我知道这个词”，而是“我知道它解决什么问题、怎么做、有什么代价”。

5.1 性能优化可以分成四层

前端性能优化，不要零散地记，要分层记：

构建层：减少打包体积，提高构建产物质量
传输层：压缩、CDN、HTTP 缓存
加载层：预加载、懒加载、代码分割
运行层：减少渲染阻塞、减少无效执行

5.2 代码分割

5.2.1 作用

把大包拆成小包，避免一次加载全部代码。

5.2.2 常见方式

路由级拆分
组件级拆分
动态导入
第三方依赖拆分

5.2.3 适合怎么答

代码分割的核心目标是减少首屏需要加载的代码量，把非首屏代码延后加载，并提高缓存复用率。

5.3 Tree Shaking

5.3.1 是什么

Tree Shaking 指的是：

在构建阶段移除没有被使用到的代码。

5.3.2 生效前提

使用 ES Module
构建工具支持静态分析
代码尽量避免副作用影响判断

5.3.3 常见误区

不是写了 Tree Shaking 就一定全部生效
CommonJS 不利于静态分析
有副作用的模块可能不会被安全删除

5.3.4 面试答法

Tree Shaking 依赖 ESM 的静态结构，在构建阶段识别未使用导出并删除，目的是减少最终包体积。

5.4 资源压缩

5.4.1 代码压缩

常见包括：

压缩 JavaScript
压缩 CSS
删除注释和无用空格
简化变量名

5.4.2 文本压缩

服务器可以对文本资源开启：

gzip
brotli

其中 brotli 在很多场景下压缩率更好。

5.4.3 图片优化

选择合适格式
压缩体积
使用懒加载
对图标优先考虑 SVG

5.5 CDN 策略

5.5.1 CDN 是什么

CDN 是内容分发网络，目的是让用户从离自己更近的节点获取静态资源。

5.5.2 CDN 能带来什么

降低静态资源访问延迟
分担源站压力
提高资源分发稳定性

5.5.3 常见使用方式

静态资源上传到 CDN
第三方库通过 CDN 外链引入
静态资源域名和主站域名分离

5.5.4 注意点

外链第三方 CDN 需要考虑稳定性和版本控制
业务核心资源最好可控
要配合缓存策略使用

5.6 缓存策略

缓存是工程化面试里特别重要的一块。

5.6.1 为什么缓存重要

如果资源能被浏览器缓存：

用户重复访问更快
减少服务器压力
降低网络传输成本

5.6.2 强缓存与协商缓存

强缓存

浏览器直接使用本地缓存，不发请求或不拿新内容。

常见响应头：

Cache-Control
Expires

协商缓存

浏览器会向服务器确认资源是否变化。

常见响应头：

ETag / If-None-Match
Last-Modified / If-Modified-Since

5.6.3 工程化里怎么配合缓存

最常见策略是：

HTML 不做强缓存或缓存时间很短
JS/CSS/图片等静态资源使用带 contenthash 的文件名
静态资源开启长时间强缓存

为什么这样做：

HTML 作为入口，保证能及时引用到新资源
静态资源名变了就自然更新
资源名不变时可以长期命中缓存

5.7 预加载与预获取

5.7.1 preload

preload 表示：

当前页面很快就要用到的关键资源，提前加载。

适合：

首屏关键脚本
首屏关键字体
关键样式资源

5.7.2 prefetch

prefetch 表示：

当前页面暂时不用，但未来可能会用到的资源，浏览器空闲时提前获取。

适合：

下一个路由页面资源
可能打开的弹窗模块

5.7.3 二者区别

类型	使用时机	优先级
preload	当前页面马上要用	高
prefetch	未来可能会用	低

5.7.4 记忆口诀

preload 现在要，prefetch 以后要。

5.8 性能优化清单总表

优化项	解决问题	常见手段
代码分割	首屏包太大	动态导入、路由懒加载、splitChunks
Tree Shaking	无用代码进入产物	ESM、静态分析、减少副作用
资源压缩	网络传输过大	代码压缩、gzip、brotli、图片压缩
CDN	资源分发慢	静态资源上 CDN
缓存策略	重复访问仍然慢	`contenthash` + 强缓存 + 协商缓存
preload/prefetch	关键资源加载时机不合理	关键资源预加载、未来资源预获取

6. 实战场景与排查思路

这一部分很重要。因为真正能把知识记住的人，不只是会背定义，而是能把定义和问题场景对应起来。

6.1 项目启动很慢，优先排查什么

可以从这几个方向看：

是否在开发环境一次性处理了过多模块
是否存在大型第三方依赖
Babel、TypeScript、Sass 等转换链是否过重
是否有不必要的全量扫描和复杂插件

如果是现代项目，可以考虑：

使用 Vite
减少冷启动时不必要处理
优化依赖结构

6.2 打包体积太大，怎么分析

标准思路：

先看包分析报告
找出大的第三方依赖
看有没有重复依赖
看是否可以动态加载
看 Tree Shaking 是否生效
看图片、字体、地图等静态资源是否过大

6.3 首屏慢，优先做什么

优先级通常是：

减少首屏 JS 体积
做路由级或组件级懒加载
压缩静态资源
合理使用 CDN
给关键资源做 preload
优化图片和接口请求时机

6.4 为什么缓存没生效

常见原因：

资源文件名没有变化，或者变化策略不合理
响应头设置有问题
HTML 入口被强缓存导致引用旧资源
部署流程没有正确上传新文件或清理旧文件

6.5 Tree Shaking 为什么没效果

常见原因：

使用了 CommonJS
打包配置没有启用合适优化
模块有副作用
实际代码导入方式导致工具无法安全删除

6.6 HMR 为什么有时会退化成整页刷新

原因可能是：

更新边界不清晰
模块状态无法被安全保留
框架或插件未正确接入热更新机制
改动影响了入口或全局依赖链

6.7 面试里如何说“我会做性能优化”

不要只说“我做过压缩、懒加载、缓存”。

更好的表达方式是：

我会先用包分析和性能指标定位瓶颈，再从代码分割、Tree Shaking、压缩、缓存和关键资源加载时机几个层面做优化。比如首屏慢时优先减少首屏 JS，静态资源使用 contenthash 配合长缓存，非首屏模块通过动态 import 延后加载。

7. 高频面试题

7.1 Webpack 的核心概念有哪些

可以答：

Webpack 最核心的是 entry、output、loader、plugin。entry 是依赖图起点，output 定义构建产物，loader 负责模块转换，plugin 负责扩展整个构建过程。

7.2 Loader 和 Plugin 有什么区别

可以答：

Loader 解决的是模块内容转换问题，比如把 TS 转成 JS，把 Sass 转成 CSS。Plugin 解决的是整个构建流程扩展问题，比如生成 HTML、抽离 CSS、分析包体积。

7.3 Webpack 为什么需要 Loader

可以答：

因为 Webpack 默认只直接理解 JS 和 JSON，而前端项目里常常有 CSS、图片、TypeScript、JSX 等资源，需要通过 Loader 先转换成 Webpack 可处理的模块。

7.4 Vite 为什么快

可以答：

因为 Vite 在开发阶段基于浏览器原生 ESM，按需编译和按需加载模块，而不是像传统打包器那样先全量打包。同时它会通过 esbuild 预构建第三方依赖，所以启动和热更新更快。

7.5 Vite 和 Webpack 的区别

可以答：

Webpack 更像全功能打包平台，适合复杂定制和历史项目；Vite 更强调现代开发体验，在开发阶段利用原生 ESM 提升速度，生产阶段再用 Rollup 完成正式构建。

7.6 什么是 Tree Shaking

可以答：

Tree Shaking 是在构建阶段删除未被使用代码的优化手段，通常依赖 ESM 的静态结构进行分析。

7.7 为什么要做代码分割

可以答：

代码分割的目标是减少首屏加载体积、延迟加载非核心模块、提高缓存复用率。

7.8 如何做前端缓存优化

可以答：

一般会让 HTML 不做长缓存，静态资源使用 contenthash 命名并开启长时间强缓存，资源更新时通过文件名变化触发浏览器重新拉取。

7.9 preload 和 prefetch 的区别

可以答：

preload 是为当前页面很快会用到的资源提前加载，优先级较高；prefetch 是为未来可能访问的资源在空闲时提前拉取，优先级较低。

7.10 如果让你优化一个大型前端项目，你会怎么做

可以答：

先看构建产物和性能指标
找首屏核心瓶颈
做代码分割和懒加载
消除无用依赖，利用 Tree Shaking
开启压缩和 CDN
配置缓存策略
评估优化前后结果

8. 更好记的学习方法

这一部分专门帮你“学得快、记得住”。不要只看知识点，要把它们压缩成脑子里能快速调用的结构。

8.1 用一条主链记住工程化

把所有知识压成这条链：

入口 -> 解析依赖 -> 转换资源 -> 扩展构建 -> 输出产物 -> 优化加载 -> 缓存复用

你以后不管看到 Webpack、Vite 还是性能优化，都往这条主链上挂。

8.2 用“问题驱动法”记忆

不要背抽象定义，要背“它解决什么问题”。

例如：

Entry：从哪开始找依赖
Loader：不认识的文件怎么转
Plugin：构建过程怎么扩展
Vite：开发时为什么快
Tree Shaking：无用代码怎么删
contenthash：缓存怎么稳定

8.3 用“一问一答卡片”记

你可以把每个点写成小卡片。

例如：

问：Loader 是什么？
答：文件转换器，把非 JS 或新语法转成 Webpack 可处理内容。

问：Vite 为什么快？
答：开发阶段使用原生 ESM，按需编译，依赖预构建使用 esbuild。

8.4 用对比法记

最容易记住的知识，往往来自对比。

对比 1：Loader vs Plugin

Loader：管模块转换
Plugin：管构建流程

对比 2：Webpack vs Vite

Webpack：先构建，再启动
Vite：先启动，按需处理

对比 3：preload vs prefetch

preload：当前快要用
prefetch：以后可能用

8.5 用口诀记

Loader 转文件，Plugin 管流程
Module 是单元，Chunk 是分组，Bundle 是产物
Webpack 先打后看，Vite 边请求边处理
preload 现在要，prefetch 以后要
HTML 短缓存，静态资源长缓存

8.6 用输出倒逼记忆

最快记住的方法，不是重复看，而是重复输出：

能口头讲一遍
能写一遍最小配置
能回答 10 个面试题
能用自己的话复述一页总结

如果你能做到这四点，基本就不是“看过”，而是“掌握了”。

9. 6 小时学习节奏建议

9.1 第 1 小时：建立总框架

目标：

知道前端工程化在解决什么
理解整条构建流水线
记住三大主线：Webpack、Vite、性能优化

这 1 小时要完成的输出：

能说出工程化定义
能背出 入口 -> 依赖 -> 转换 -> 输出 -> 优化

9.2 第 2-3 小时：集中突破 Webpack

重点：

Entry
Output
Loader
Plugin
Module / Chunk / Bundle
代码分割

这两个小时一定要做到：

会讲 Webpack 构建流程
会区分 Loader 和 Plugin
会解释 contenthash
会说代码分割的目的

9.3 第 4 小时：集中突破 Vite

重点：

原生 ESM
依赖预构建
esbuild
Rollup
HMR
和 Webpack 对比

这一小时最关键的输出：

为什么 Vite 快

你要能不看笔记，完整说出来。

9.4 第 5 小时：性能优化清单

重点：

代码分割
Tree Shaking
资源压缩
CDN
缓存策略
preload / prefetch

这一小时不要死记，要记：

每个优化项解决什么问题
它通常怎么做
面试时怎么用一句话表达

9.5 第 6 小时：总复盘 + 背诵输出

建议做三件事：

把一页速记总结手写或默写一遍
连续回答 10 个面试题
用 5 分钟讲一遍“前端工程化”

如果 5 分钟能讲清楚，你这份内容就基本真的学进去了。

10. 一页速记总结

10.1 工程化核心

前端工程化 = 把开发、构建、优化、发布流程标准化和自动化。

10.2 Webpack 核心

Entry -> Dependency Graph -> Loader -> Plugin -> Output

Entry：依赖起点
Output：输出规则
Loader：文件转换器
Plugin：构建扩展器

10.3 Webpack 三组易混概念

Module：单个模块
Chunk：模块分组
Bundle：最终产物

10.4 Vite 核心

开发靠原生 ESM，依赖预构建靠 esbuild，生产构建靠 Rollup。

10.5 性能优化核心

代码分割：减少首屏加载量
Tree Shaking：删除未使用代码
压缩：减少传输体积
CDN：就近分发资源
缓存：提高重复访问速度
preload/prefetch：优化资源加载时机

10.6 缓存最佳实践

HTML：不长缓存
静态资源：contenthash + 长缓存

10.7 一句话讲清前端工程化

前端工程化就是通过构建工具和优化策略，把前端项目从源码组织到上线交付的整条链路自动化、标准化。

11. 背诵口诀

11.1 总口诀

工程化三件事：构建、优化、交付。

11.2 Webpack 口诀

入口找依赖，Loader 做转换，Plugin 扩能力，Output 出产物。

11.3 Vite 口诀

开发走 ESM，依赖交 esbuild，生产交 Rollup。

11.4 优化口诀

大包要拆，废码要摇，资源要压，静态上 CDN，缓存看 hash，关键资源先到。

11.5 缓存口诀

HTML 别久缓存，静态资源看内容。

11.6 面试口诀

回答任何工程化问题，尽量按这个顺序说：

它解决什么问题
它的核心原理是什么
常见做法有哪些
有什么优缺点或注意点

只要你按这个顺序说，答案通常就会显得很完整。

附：你可以怎么用这份笔记

第一次学习

按 1 -> 2 -> 3 -> 4 -> 5 顺序看，先搭框架。

第二次复习

重点看：

Webpack 核心流程
Vite 为什么快
性能优化总表

第三次冲刺

只看：

一页速记总结
背诵口诀
高频面试题

如果你能把这三部分不看笔记讲出来，说明你已经记住了。

前端工程化学习笔记

目录

1. 学习总览

1.1 什么叫前端工程化

1.2 你可以把工程化理解成一条流水线

1.3 学习主线

主线 1：Webpack 解决“项目怎么被构建出来”

主线 2：Vite 解决“开发阶段为什么能更快”

主线 3：性能优化解决“项目上线后怎么更快”

1.4 核心记忆主线

2. 工程化到底在解决什么

2.1 没有工程化时会遇到什么问题

2.2 工程化包含哪些能力

2.3 面试里怎么概括工程化

2.4 记忆口诀

3. Webpack 核心

3.1 Webpack 是什么

3.2 Webpack 核心流程

3.3 四个最高频核心概念

3.4 Entry

3.4.1 Entry 是什么

3.4.2 单入口和多入口

3.4.3 多入口适合什么场景

3.4.4 面试答法

3.5 Output

3.5.1 Output 是什么

3.5.2 常见文件名占位符

3.5.3 为什么推荐 contenthash

3.5.4 面试答法

3.6 Loader

3.6.1 Loader 是什么

3.6.2 Loader 的本质

3.6.3 常见 Loader

3.6.4 Loader 执行顺序

3.6.5 面试答法

3.7 Plugin

3.7.1 Plugin 是什么

3.7.2 Plugin 的本质

3.7.3 常见 Plugin

3.7.4 自定义 Plugin 核心结构

3.8 Module、Chunk、Bundle 的区别

3.8.1 Module

3.8.2 Chunk

3.8.3 Bundle

3.8.4 一句话区分

3.9 代码分割

3.9.1 为什么要做代码分割

3.9.2 常见代码分割方式

3.9.3 splitChunks 作用

3.10 HMR 热更新

3.10.1 HMR 是什么

3.10.2 好处

3.10.3 不是所有修改都能“无感替换”

3.11 一份最小可理解的配置

3.12 Webpack 记忆压缩版

4. Vite 原理

4.1 Vite 是什么

4.2 Vite 为什么快

开发阶段

生产阶段

4.3 Vite 开发阶段原理

4.3.1 原生 ESM

4.3.2 按需编译

4.3.3 依赖预构建

4.3.4 预构建在干什么

4.4 Vite 生产构建为什么用 Rollup

4.5 Vite 的 HMR 为什么快

4.6 Vite 插件系统

4.7 Vite 和 Webpack 对比

4.8 面试答法

4.9 记忆口诀

5. 性能优化清单

5.1 性能优化可以分成四层

5.2 代码分割

5.2.1 作用

5.2.2 常见方式

5.2.3 适合怎么答

5.3 Tree Shaking

5.3.1 是什么

5.3.2 生效前提

3.9.3 `splitChunks` 作用