构建工具与模块化实战解析
本期聚焦构建工具核心原理与模块化系统设计两大高频考点，结合2026年面试趋势，提供原理深度解析与实战场景题。
一、构建工具核心原理
Webpack模块解析机制深度剖析
- 依赖图构建过程：从entry递归分析import/require语句，生成ModuleGraph（模块依赖图），每个模块通过Module对象存储源码、依赖、转换结果。关键点在于resolve阶段处理路径别名、扩展名补全等逻辑
- Chunk生成策略：基于SplitChunksPlugin的默认规则（chunks: 'async'）自动拆分，或通过entry配置手动指定。动态import()会触发代码分割，生成独立chunk。需掌握chunkhash与contenthash的缓存策略差异
- 持久化缓存优化：Webpack5的filesystem缓存将编译中间结果（AST、依赖关系）序列化到磁盘，二次构建时跳过未变更模块的解析。配置cacheDirectory需注意多环境部署时的路径一致性
Vite开发服务器原理对比
- ESM按需编译：拦截浏览器import请求，对.vue/.ts等非标准模块调用对应插件转译（如@vitejs/plugin-vue处理SFC），返回标准JS。与Webpack全量打包的核心差异在于"请求时编译"vs"构建时打包"
- 预构建依赖优化：首次启动时扫描node_modules，将CommonJS模块转为ESM并合并为单文件（如lodash-es），减少后续请求数。需理解为什么需要预构建（CJS转ESM、路径优化）
二、模块化系统设计实战题
场景题：设计一个支持Tree Shaking的模块系统
问题背景：假设你需设计一个类似Webpack的模块打包器，要求支持ES Module的静态分析以实现Tree Shaking。请描述关键设计点。
答题要点（面试官期望的深度回答）：
- 静态分析阶段：遍历AST识别import/export语句，建立模块依赖关系图。重点：识别"sideEffects: false"标记的模块，这些模块的导出若未被引用可安全删除
- 标记未使用代码：从entry开始深度遍历依赖图，标记所有被引用的导出。未被标记的export声明（函数、变量）即为dead code。难点：如何处理动态import、条件导入等非静态场景
- 代码生成优化：生成产物时跳过标记为未使用的代码。注意：需保留模块的副作用代码（如console.log），除非明确标记sideEffects: false
- 与CommonJS的兼容性：CJS模块无法静态分析，需通过插件（如babel-plugin-transform-commonjs）转为ESM，或标记为有副作用（sideEffects: true）避免误删
进阶追问：如何实现跨模块的Tree Shaking？（如A模块导出函数f，B模块导入但未使用，f是否应被删除？）答案：需建立跨模块引用链，若f在入口模块的引用链上未被使用，且无副作用，则可删除
三、模块联邦（Module Federation）实战
微前端场景下的模块共享设计
- 核心机制：通过Webpack5的ModuleFederationPlugin，将应用A的组件暴露为remote模块，应用B通过import()动态加载。关键配置：exposes（暴露模块）、remotes（引用远程）、shared（共享依赖）
- 版本冲突处理：当多个应用共享React时，通过shared配置指定singleton: true（单例模式），确保运行时只有一个React实例。需理解singleton与requiredVersion的协同作用
- 性能优化点：避免过度共享（如工具函数库），优先共享大体积、高频使用的库（React、Vue）。注意：共享模块需考虑构建时的external配置与运行时的加载顺序
四、面试加分技巧
构建工具选型回答框架
当被问"为什么选择Webpack/Vite"时，避免简单对比，应分场景：
- 大型遗留项目：Webpack生态完善，插件丰富，适合复杂构建流程（如多入口、自定义loader）
- 新项目/快速迭代：Vite开发体验更优（秒级启动），适合现代框架（Vue/React）+TypeScript
- 库开发：Rollup更适合输出ESM/UMD格式，Tree Shaking更彻底
原理类问题回答结构：先简述核心流程（如"Webpack从entry开始构建依赖图"），再挑1-2个关键点深入（如"依赖收集如何避免循环引用"），最后结合实际项目经验（如"我们通过splitChunks优化了vendor体积"）
延伸推荐：
- 构建工具性能优化实战（缓存策略、多线程构建）
- 现代前端工程化标准演进（ESM、Bundleless趋势）
