工程化

Webpack：
• 打包所有模块成 bundle
• 开发时也需要完整打包（慢）
• 丰富的 loader 和 plugin 生态
• 配置复杂但功能强大

Vite：
• 开发时利用浏览器原生 ESM，按需编译（快）
• 生产构建用 Rollup
• 开箱即用，配置简单
• HMR 极速（只更新变更模块）

核心区别：
Webpack 是 bundle-based，Vite 是 native ESM-based。
大型项目开发时 Vite 启动和热更新明显更快。

Babel 是 JavaScript 编译器，将 ES6+ 代码转换为向后兼容的 ES5 代码。

核心功能：
1. 语法转换：箭头函数、可选链、空值合并等
2. Polyfill：通过 core-js 注入缺失的 API（Promise、Array.includes 等）
3. JSX 转换：React JSX → React.createElement

配置方式：
• @babel/preset-env — 按目标浏览器自动决定转换
• @babel/preset-react — JSX 支持
• @babel/preset-typescript — TS 支持

注意：Vite/esbuild 内置了 TS 和 JSX 转换，通常不需要单独配置 Babel。

Tree-shaking：打包时移除未使用的代码，减小产物体积。

前提条件：
1. 使用 ES Module（import/export），CommonJS 不支持
2. 副作用标记：package.json 中 "sideEffects": false
3. 生产模式构建

示例：
// utils.js
export function add(a, b) { return a + b; }
export function sub(a, b) { return a - b; }

// main.js
import { add } from './utils'; // sub 会被移除

注意事项：
• 有副作用的模块（如 polyfill、全局 CSS）需要排除
• 动态导入无法 tree-shake
• 尽量使用具名导出而非默认导出

微前端：将一个大型前端应用拆分为多个独立子应用，独立开发、部署、运行。

实现方案：
1. iframe：最简单，天然隔离，但体验差（刷新、弹窗、通信）
2. qiankun（基于 single-spa）：HTML Entry + 沙箱隔离，国内最流行
3. Module Federation（Webpack 5）：运行时共享模块，无需改架构
4. Web Components：原生标准，Shadow DOM 隔离
5. EMP：基于 Module Federation，支持跨框架

核心问题：
• JS 沙箱隔离（全局变量污染）
• CSS 样式隔离
• 子应用通信
• 公共依赖抽取

Monorepo：将多个相关项目放在同一个代码仓库中管理。

优点：
1. 代码共享方便（公共组件、工具函数）
2. 统一的技术栈和规范
3. 原子化提交（跨包修改一次提交）
4. 更容易重构

缺点：
1. 仓库体积大，clone 慢
2. CI/CD 需要增量构建
3. 权限管理复杂

常用工具：
• pnpm workspaces — 轻量，基于硬链接节省空间
• Turborepo — 增量构建和缓存
• Nx — 功能最全，支持依赖图分析

典型流程：

1. 代码提交（CI 阶段）：
• git push 触发 CI
• ESLint 代码检查
• TypeScript 类型检查
• 单元测试
• 构建打包

2. 部署（CD 阶段）：
• 产物上传到 CDN / 服务器
• Docker 镜像构建（SSR 应用）
• 自动部署到测试/生产环境

常用工具：
• GitHub Actions / GitLab CI — CI/CD 平台
• Jenkins — 自托管 CI/CD
• Docker — 容器化部署
• Nginx — 静态文件服务 + 反向代理

Source Map 是一个映射文件，记录打包后代码和源代码的对应关系。

作用：
• 浏览器开发者工具中直接调试源代码（TS、JSX、压缩代码）
• 错误监控平台还原真实报错位置

配置方式：
• Webpack: devtool: 'source-map'
• Vite: build.sourcemap: true

安全：
• 生产环境不应暴露 Source Map（会泄露源码）
• 可上传到错误监控平台（Sentry），不在 CDN 部署
• //# sourceMappingURL=app.js.map 注释指向映射文件