外观
前端工程化与模块
- 状态：未准备
- 适用方向：前端 / Go 全栈
- 最近复习：待填写
- 下次复习：待安排
一句话回答
工程化把模块、类型检查、构建、规范与验证组织成可重复流程；开发环境追求反馈速度，生产构建追求正确交付和资源效率，两者行为不能直接等同。
原理解释
ESM 与 CommonJS
ESM 使用 import/export，具备便于静态分析的模块结构，导入是活绑定；动态 import 返回 Promise，可形成按需加载边界。CommonJS 使用 require/module.exports，执行与缓存遵循对应运行时规则，不能简单说二者永远不能互操作。浏览器和 Node 环境的解析、扩展名和包条件还需区分。
Vite 为什么开发反馈快？
开发服务器利用浏览器原生模块能力，按需转换源码，并为依赖和热更新做处理；生产仍需构建优化。不要背“Vite 永远是 esbuild + Rollup”：本仓库不同项目跨 Vite 5 与 Vite 8。Vite 5 的典型组合是 esbuild 处理依赖预构建等工作、Rollup 负责生产打包；Vite 8 转向 Rolldown 统一打包，并采用 Oxc 编译工具链。回答时应结合具体版本与锁文件。
Tree shaking 与代码分割
Tree shaking 依赖静态分析移除未使用代码，但副作用、包的 sideEffects 声明和导入形式会影响结果；错误声明无副作用可能删掉 CSS 等必要行为。代码分割把资源拆成按需加载的块，减少首批下载但增加请求与调度开销，不是块越多越好。
工具各管什么？
- TypeScript：类型检查；只转译 TS 不一定检查类型，应有明确的 tsc 流程。
- ESLint：查潜在问题和约定；Prettier 主要处理格式。
- 单元测试：验证纯逻辑；组件/集成测试验证交互；端到端测试验证关键用户流程。
- 锁文件：记录解析版本，配合对应包管理器的冻结安装减少环境差异。
- Source map：帮助把构建代码定位回源码，发布策略需考虑源码暴露和监控需求。
场景与边界
开发代理不等于生产反向代理；注入客户端 bundle 的环境变量不能当秘密。热更新保留状态的行为不等同完整刷新，因此还需检查生产构建和首次加载。
项目中的应用
对照 Blog、EinoTalk、SimulSpeak 的 package.json，解释各自 build、lint、test 脚本。项目有脚本不代表已执行或检查通过。
常见追问
- HMR 与刷新区别？ HMR 更新受影响模块并可保留部分状态，刷新重建页面上下文。
- 为什么开发正常生产失败？ 检查类型检查差异、环境变量、大小写路径、资源 base、路由回退与服务端/客户端边界。
- 怎么分析包体积？ 看构建产物和可视化报告，先识别大依赖、重复依赖和首屏不需要的代码，再做分割和替换。