代码分割与缓存策略

共 21 题
#

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 写入失败无需处理,浏览器会重试