前端工程化

第 1 篇

前端工程化（一）：从流程封装到稳定交付

前端工程化是把开发、检查、构建、测试、发布、监控和维护等流程标准化、自动化，让项目从“能运行”走向“能持续交付”。

第 2 篇

前端工程化（二）：从模块系统到依赖图与代码分割

模块系统决定依赖如何被声明和分析；动态 `import()` 建立代码分割边界；Tree Shaking 负责在满足条件时移除未使用代码。三者不能混为一谈，最终结论必须分别通过源码、构建产物和浏览器网络行为验证。

第 3 篇

前端工程化（三）：打包器如何从入口生成构建产物

打包器不是简单地把多个文件拼接起来。它从入口开始解析模块，递归建立依赖图，通过 loader 或转换流程处理资源，再根据入口和动态导入边界生成 chunk，最后输出带 hash、source map 和路由映射的构建产物。性能判断必须回到真实产物和运行时数据，不能只看文件数量或单个未压缩体积。

第 4 篇

前端工程化（四）：TypeScript、Babel 与浏览器兼容

TypeScript 主要负责开发和编译阶段的类型检查，Babel 或框架编译链负责语法转换，`target` 决定输出语法方向，Polyfill 补足浏览器缺失的运行时 API，Browserslist 声明需要覆盖的浏览器范围。它们共同参与兼容性建设，但不能互相替代。

第 5 篇

前端工程化（五）：依赖版本与可复现安装

package.json 表达项目想要什么，lockfile 记录本次实际解析出了什么；semver 决定允许更新的范围，packageManager 固定安装工具版本，缓存负责加速下载，npm ci 负责在 CI 中按 lockfile 做干净、可复现的安装。它们解决的是不同层次的问题，不能互相替代。

第 6 篇

前端工程化（六）：代码规范与提交门禁

ESLint、Prettier、TypeScript 和测试解决的是不同风险：Prettier 统一格式，ESLint 检查代码质量，TypeScript 检查静态类型关系，测试验证运行时行为。它们应该组成一条从本地到 CI 的质量门禁，而不是互相替代。

第 7 篇

前端工程化（七）：测试体系怎么分层与取舍

测试体系不是把所有场景都写成 E2E，也不是追求测试数量越多越好。应让确定性强、反馈快的测试覆盖底层逻辑，让组件、契约和集成测试覆盖协作边界，再用少量 E2E 验证关键用户路径。测试结果还要区分通过、断言失败和环境阻断，避免把环境问题误判成业务结论。

第 8 篇

前端工程化（八）：性能指标与加载优化

性能优化应该从测量开始，而不是看到某个大文件就直接压缩、拆包或懒加载。先记录 LCP、INP、CLS、TTFB、请求瀑布、资源体积和主线程任务，再根据证据选择优化手段。当前页面指标良好时，最有价值的动作往往是保留可复现基线，防止后续功能增长造成回归。

第 9 篇

前端工程化（九）：React 与 Next.js 的渲染边界

SSR、SSG、ISR、CSR 描述页面内容的生成时机与方式；Server Component 和 Client Component 描述组件的运行边界。判断一个 Next.js 页面需要同时检查源码、数据获取、构建结果和实际响应，不能只看有没有 `use client`

第 10 篇

前端工程化（十）：从联系表单理解运行时稳定性

运行时稳定性需要同时回答三个问题：用户看到什么，服务端操作是否已发生，开发者怎样定位故障。结束 loading 只是其中一步，超时也不能直接当作业务失败。