背景与价值

• 浏览器原生 ESM 已成熟；借助 Import Maps 可对依赖路径与版本进行集中治理，降低打包复杂度与发布耦合。
• 与 CDN 协作可实现模块的按需加载与版本固定。

基本示例：映射与加载

动态导入与条件加载

async function loadCharts() {
  const { Chart } = await import('https://cdn.example.com/[email protected]/index.js');
  // 使用 Chart ...
}

if (window.innerWidth > 768) loadCharts();

版本治理与回滚

• 使用固定版本号或子路径，避免 CDN 最新版引入破坏性变更。
• 变更通过修改 import map 即可回滚或切换版本，无需重新打包。

设计要点

• 将核心依赖映射在同域或可信 CDN，开启 Subresource Integrity (SRI) 与 Content-Security-Policy 约束。
• 按模块粒度拆分，减少初始加载；对非关键模块采用动态导入。
• SSR 时需要在服务端输出 import map；与构建产物一致。

指标验证（Chrome 128/Edge 130）

• 首屏脚本体积（P95）：较传统聚合打包降低 20%–35%（按需加载）。
• 回滚耗时：修改 import map 到生效 ≤ 2min（CDN 缓存刷新）。
• 稳定性：模块解析失败率 ≤ 0.5%（开启 SRI 与 CSP 后）。

风险与治理

• 浏览器支持差异：旧版 Safari/Firefox 需回退为打包方案或 Polyfill（有局限）。
• CDN 可用性：启用多源与就近缓存；失败时回退到本地镜像路径。
• 安全：必须使用 SRI 校验与 CSP script-src/trusted-types 配合，避免供应链风险。

测试清单

• 模块解析：启用/禁用单个映射项可正确影响导入路径。
• 动态导入：在多断点下按需加载，未加载不影响主流程。
• 回滚与切换：版本切换后功能与兼容性保持正确。

应用场景

• 设计系统组件库与工具函数模块化治理；大型应用的渐进式拆包与 CDN 托管策略。