工程化八股

sideEffects 写错的后果

• 写成 false：打包器认为所有文件都无副作用，import './polyfill'、import './global.css'、注册自定义元素的模块会被整段删掉，运行时报 xxx is not defined。
• 正确写法是数组精确声明："sideEffects": ["*.css", "./src/polyfill.ts"]，其余文件按无副作用处理。
• 另一个隐形坑：库把 module 指向 ESM、main 指向 CJS，打包器优先 module 才能摇；只提供 CJS 时只能靠 usedExports 做有限删除。

追问：为什么 import { a } from './utils' 有时整包都进不来——utils 里有顶层副作用，或 babel 把 ESM 转成了 CJS，导致静态分析失效。

三、CommonJS 与 ESM

一句话：CJS 是运行时同步加载、值拷贝；ESM 是编译时静态解析、实时绑定。

循环依赖的差异要能举例

// a.js
exports.done = false;
const b = require('./b');   // b 此时拿到的是 { done: false }
exports.done = true;

// b.js
const a = require('./a');   // 拿到 a 的半成品 exports
console.log(a.done);        // false

ESM 下 b 看到的是 live binding，值会随 a 的执行更新，但若在初始化前读取仍会报 "Cannot access before initialization"。

追问：为什么打包后 this 变了——Babel 把 ESM 转 CJS 时会给顶层 this 补 void 0，行为是对齐规范的。

四、包管理与依赖

一句话：版本号决定"能升到哪"，lock 文件决定"这次装到哪"，peerDependencies 决定"和谁共用一份"。

• ^1.2.3：允许 >=1.2.3 <2.0.0，锁 major。
• ~1.2.3：允许 >=1.2.3 <1.3.0，锁 minor。
• 精确版本 1.2.3：依赖方最省心，库作者最常被抱怨。

lock 文件的作用：记录完整依赖树、解析地址与 integrity 校验值，保证不同机器、不同时间装出同一棵树；CI 用 npm ci 严格按 lock 安装，npm install 则可能更新 lock。

peerDependencies 解决什么

插件（如 eslint-plugin-react、react-dom）声明"我需要宿主项目的 React 17–19"。包管理器据此提示版本不匹配，并在 pnpm/npm 7+ 中避免装第二份 React——两份 React 会导致 hooks 报 "Invalid hook call"、Context 读不到。

幽灵依赖

代码里 import _ from 'lodash'，但 package.json 里没写，只是恰好被别的包依赖并被 npm/yarn 扁平化提升到顶层 node_modules。换包管理器、上游删依赖、版本变化都会突然报错。pnpm 用"只暴露声明过的依赖"的 node_modules 结构从根上消除，代价是要处理一些老库的软链接兼容问题。

五、前端监控

一句话：错误、性能、行为三条线采集，采样上报，再用 sourcemap 把压缩后的堆栈还原。

错误捕获

资源错误必须用捕获阶段：error 事件在资源元素上触发且不冒泡，冒泡阶段监听不到；回调里 event.target 是元素本身，需要判断 tagName 再取 src/href。

跨域脚本报 "Script error." 时，需要 <script crossorigin="anonymous"> 且 CDN 返回 Access-Control-Allow-Origin。

性能上报：PerformanceObserver 订阅 paint、largest-contentful-paint、layout-shift、longtask，导航数据取 performance.getEntriesByType('navigation')；上报用 navigator.sendBeacon，避免阻塞卸载。

sourcemap 还原：构建产出 .map，上传到监控平台而不公开发布，平台用 source-map 库按 stack 里的行列号反查原始文件、函数名与源码片段；hidden-source-map 只生成不写 sourceMappingURL。

追问：监控 SDK 自己报错怎么办——加开关与 try/catch 包裹，限制单页上报条数，避免死循环。

六、灰度与发布

一句话：资源用内容 hash 长缓存，入口 HTML 不缓存，回滚就是切回上一份入口。

• 静态资源：app.[contenthash].js + Cache-Control: public, max-age=31536000, immutable，内容变则文件名变，天然失效。
• 入口 HTML：Cache-Control: no-cache（可缓存但每次校验）或极短 max-age，保证拿到最新的资源引用。
• 发版顺序：先传静态资源，再更新 HTML，避免用户拿到引用了不存在文件的 HTML。
• 灰度：按用户 ID 哈希、地域、设备分流；CDN/边缘计算按 Cookie 返回不同 HTML，或服务端渲染时注入不同资源地址。
• 回滚：保留历史版本目录与 HTML 快照，切 nginx 指向或回退 HTML，再刷新 CDN；因为资源文件名带 hash，旧 HTML 一定还能找到旧资源。
• 数据库与接口要向前兼容，前端回滚才不会因字段缺失而崩。

追问：为什么不能只刷新 CDN 缓存——用户浏览器里可能还存着旧 HTML，只能靠短缓存加版本对比。

七、规范与协作

一句话：ESLint 管"对不对"，Prettier 管"好不好看"，git hooks 把检查卡在提交前。

• husky 挂 pre-commit，配合 lint-staged 只处理暂存文件，避免全量检查拖慢提交。
• commit-msg 用 commitlint 校验 Conventional Commits：type(scope): subject，便于生成 changelog 与语义化版本。
• CI 再跑一次全量 lint + 类型检查，防止 --no-verify 绕过本地钩子。
• 编辑器统一 .editorconfig 与 .vscode/settings.json，减少无意义 diff。

关联阅读

• 构建工具原理与选型
• HTTP 协议
• 面试专项总览