# 1. HTTP 缓存(强缓存/协商缓存)与代码分割文件名的 hash 策略 A 内容哈希文件名配合 immutable 强缓存可实现静态资源长期缓存,HTML 入口则用短缓存或协商保证更新生效 ✓ 正确答案 B 强缓存期间浏览器每次都会向服务器发送请求 C 协商缓存不涉及任何 HTTP 头 D 文件名 hash 与缓存策略无关
# 2. Webpack 5 Module Federation(与 Module Federation 2 / @module-federation/runtime) A Module Federation 的远程必须在运行时才能声明 B Module Federation 2 只能在 webpack 中使用 C shared 配置不会做版本协商,总是加载多份 D Module Federation 通过 exposes/remotes/shared 实现运行时模块共享,2.0 版用独立运行时支持动态远程与多打包器集成 ✓ 正确答案
# 3. esbuild、SWC、Rollup、Rspack 在构建性能与生态的取舍 A esbuild/SWC 以高性能转译为长,Rollup 以精细 ESM 产物为长,Rspack 兼容 webpack 生态,选型应按项目类型组合使用 ✓ 正确答案 B Rollup 完全无法打包应用代码 C esbuild 的插件生态比 webpack 更丰富 D Rspack 与 webpack 配置完全不能互通
# 4. Tree Shaking 的副作用(sideEffects)与 ESM 静态分析前提 A CJS 同样具备静态分析所需的全部信息 B Tree Shaking 依赖 ESM 静态导入导出与 sideEffects 副作用声明两个前提,声明必须与真实副作用一致否则会被错误裁剪 ✓ 正确答案 C 打包器总能完整摇除未使用的 CJS 导出 D sideEffects: false 会让所有代码被保留
# 5. ESM dynamic import 与 Route-based splitting 的实现 A 路由级分割只能手写 import 语句,框架无法封装 B 路由组件用 dynamic import 引入形成分割边界,配合框架异步组件封装与预取、加载态治理实现按需加载 ✓ 正确答案 C 动态 import 的路由 chunk 无法命名 D 路由分割与首屏性能无关
# 6. React.lazy 与 Suspense 在路由级懒加载与组件预取的工程取舍 A React.lazy 加载失败时无需处理,Suspense 会自动重试 B React.lazy 只能用于路由,不能用于普通组件 C React.lazy 与 Suspense 实现按需加载,工程上需配合空闲预取、Error Boundary 错误兜底与 SSR 一致性治理 ✓ 正确答案 D 使用 React.lazy 后首屏体积必然增大
# 7. 资源预加载,<link rel="preload">/prefetch 与 modulepreload 在首屏关键路径的工程协作 A prefetch 的优先级高于 preload B modulepreload 只对 CSS 生效 C 打包器无法自动注入预加载链接 D preload 面向当前关键资源、prefetch 面向未来资源、modulepreload 提前抓取 ESM 依赖图,三者按场景协作并需防止滥用抢占带宽 ✓ 正确答案
# 8. ESM 产物(output.module)与 <script type="module"> 在现代浏览器的按需加载与缓存边界 A <script type="module"> 会一次加载全部模块 B ESM 产物无法配合 CDN C 模块级缓存不需要内容哈希文件名 D 原生 ESM 产物按模块独立请求与缓存,实现按需加载,但需注意请求数量、文件名稳定性与旧浏览器降级 ✓ 正确答案
# 9. 动态 import() 的加载失败重试、超时降级与 Suspense fallback 的容错设计 A 加载容错需组合指数退避重试、超时降级与 Error Boundary 错误态建模,Suspense fallback 不能替代失败处理 ✓ 正确答案 B 动态 import 失败后浏览器会自动重试 C Suspense fallback 会自动捕获加载失败 D 版本过期导致的 chunk 404 无需特殊处理
# 10. Webpack 5 SplitChunksPlugin 的 cacheGroups 策略在 vendoring 与异步分割的工程价值 A cacheGroups 拆得越多越好 B SplitChunksPlugin 只处理同步模块 C cacheGroups 通过 test/priority 等规则实现 vendors 分组与异步公共块提取,需按缓存命中、请求数与体积数据权衡粒度 ✓ 正确答案 D vendor 分组会导致业务代码无法缓存
# 11. Rollup manualChunks 与 Vite build.rollupOptions.output.manualChunks 的代码分割策略 A manualChunks 支持对象与函数两种形态,用于稳定依赖分组与长缓存,但需注意循环依赖与 Rolldown 下的实现差异 ✓ 正确答案 B manualChunks 配置后其他模块不再自动分割 C manualChunks 对象与函数形态语义相同 D 手动分组不会产生循环 chunk 问题
# 12. HMR(Hot Module Replacement)原理与 React Fast Refresh A HMR runtime 沿依赖图找 accept 边界执行替换,React Fast Refresh 在此基础上按组件结构校验保留状态并安全降级 ✓ 正确答案 B React Fast Refresh 在生产构建中同样生效 C 找不到 accept 边界时不会刷新 D HMR 更新时总是保留所有运行时状态
# 13. 产物分析与 Bundle Analyzer 的体积治理 A 用 Bundle Analyzer 分析体积构成后,按依赖、重复、chunk 粒度分类治理,并建立体积预算与 CI 门禁持续拦截回归 ✓ 正确答案 B 体积优化一次完成即可,无需持续监控 C Bundle Analyzer 只能分析 CSS D 体积治理与依赖准入无关
# 14. Service Worker 缓存策略(Cache-first/stale-while-revalidate)与代码分割 chunk 的预缓存配合 A Cache-first 适合所有资源类型 B 构建期生成资源清单让 SW 预缓存 chunk,配合 Cache-first 与 SWR 分层策略实现离线与秒开,并需治理版本更新与缓存清理 ✓ 正确答案 C Service Worker 无法缓存动态 import 的 chunk D stale-while-revalidate 会阻塞页面渲染
# 15. 子资源完整性(SRI)与内容哈希文件名在 CDN 缓存与供应链安全的协作 A contenthash 文件名保证版本一致与缓存正确,SRI 在加载期做字节级完整性校验,两者协作构成供应链安全防线 ✓ 正确答案 B SRI 会阻止所有 CDN 缓存生效 C SRI 校验不依赖 CORS 头 D 第三方脚本无需使用 SRI
# 16. Webpack 5 Persistent Caching 与 Rspack 在中大型工程的现代取舍 A Webpack 5 持久化缓存可在存量项目获得增量收益,Rspack 以 Rust 内核提供数量级性能提升,取舍取决于生态依赖度与迁移验证成本 ✓ 正确答案 B Rspack 与 webpack 的插件行为完全一致,迁移零风险 C 持久化缓存会破坏构建结果正确性 D Webpack 5 不支持持久化缓存
# 17. Terser/SWC minify 在产物大小与构建时间的工程取舍 A 压缩选项不会影响产物正确性 B SWC minify 的压缩比总是高于 Terser C Terser 压缩选项更细、体积更优,SWC minify 用 Rust 显著缩短构建时间,取舍取决于体积与时间约束并用对比数据决策 ✓ 正确答案 D SWC 只能压缩 TS,不能压缩 JS
# 18. 动态 polyfill 与按需加载(@babel/preset-env useBuiltIns: 'usage')的取舍 A useBuiltIns: 'usage' 能感知所有运行时动态 API 使用 B useBuiltIns: 'usage' 会注入全部 polyfill C Polyfill.io 方案没有任何安全风险 D useBuiltIns: 'usage' 按源码静态分析注入 core-js,动态 polyfill 按浏览器特性运行时返回,取舍在构建期确定性与运行时精确性之间 ✓ 正确答案
# 19. 预构建(Pre-bundling)的依赖优化(Vite esbuild 预构建) A Vite 预构建只为提高构建速度,与依赖加载无关 B 预构建缓存永远不需要重建 C Vite 预构建实现依赖 ESM 化、扁平化与请求收敛,缓存基于 lockfile 失效,include/exclude 治理边界 ✓ 正确答案 D exclude 依赖后浏览器一定无法加载
# 20. SSR/ISR 与 Edge/CDN 缓存组合,缓存控制头与页面级失效策略在部署架构的取舍 A CDN 缓存与 SSR 无法共存 B ISR 页面永远不失效 C SSR/ISR 与 Edge/CDN 通过缓存控制头实现多级缓存,失效策略在时间驱动与事件驱动间取舍并需监控治理 ✓ 正确答案 D 缓存头只需在页面里写死即可
# 21. 持久化缓存(localStorage/IndexedDB)与版本迁移、容量清理在离线应用的工程实践 A IndexedDB 异步大容量适合结构化缓存,localStorage 同步小容量适合轻量数据,需用 schemaVersion 做迁移、用 TTL/LRU 与 estimate 做容量清理 ✓ 正确答案 B localStorage 适合存储 GB 级数据 C 持久化缓存不需要版本管理 D 写入失败无需处理,浏览器会重试