动态 import 可按需加载表单项组件以减小首包体积、提升首屏性能，需拆分组件、结合 Suspense/defineAsyncComponent 处理加载态，并兼顾预加载、错误降级与 SSR 兼容。
动态 import 可以让表单项组件只在需要时加载，避免初始包体积过大、提升首屏性能。关键在于把不同表单项（如富文本编辑器、地理选择器、身份证识别组件等）拆成独立模块，在用户触发对应字段时再加载。
按字段类型动态加载组件
当表单结构由后端配置返回，或用户点击“添加附件”、“切换为高级地址输入”等操作时，用 import() 拉取对应组件：
- 每个表单项封装为一个独立的 React 组件（或 Vue SFC），导出默认渲染函数和校验逻辑
- 在表单渲染逻辑中，对特定
field.type === 'rich-text'的字段，调用const { default: RichText } = await import('./fields/RichText') - 用
Suspense（React）或v-if + defineAsyncComponent（Vue）处理加载状态，避免白屏
配合懒加载策略做预判加载
不是所有场景都适合“点开才加载”。对高频操作或用户明显即将使用的字段，可提前触发 import，但不立即挂载：
- 监听用户聚焦到某类字段前的两个输入框（如从“城市”跳到“区域”），预加载地理选择器模块
- 用
Promise.resolve().then(() => import(...))或setTimeout延迟加载，避免阻塞当前交互 - 加个弱引用缓存：
const cache = new Map(); cache.set('rich-text', import(...))，后续重复使用直接取 Promise
加载失败与降级处理要明确
网络波动或构建产物缺失时，不能让整个表单不可用：
Java Maven Common
下载
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
立即学习“Java免费学习笔记（深入）”；
- 用
try/catch包裹 import 调用，捕获ChunkLoadError或Network Error - 降级方案要具体：富文本失败 → 切回原生
textarea；地图组件失败 → 改用地址文本输入 + 手动坐标填写 - 上报错误日志，带上字段 ID 和模块路径，便于定位构建或 CDN 问题
服务端渲染（SSR）需特殊处理
Node.js 环境不支持原生 import() 动态路径，且服务端不该加载浏览器专用组件：
- 在 SSR 阶段统一渲染基础字段（input、select），把动态字段占位为
<div data-field-type="rich-text"></div> - 客户端 Hydration 后，检查 DOM 中这类占位节点，再执行对应 import 并挂载
- Webpack 或 Vite 构建时确保动态导入路径是静态可分析的（避免拼接变量），否则无法生成对应 chunk
不复杂但容易忽略：动态 import 加载的是模块，不是组件实例。记得在 then 或 await 后正确创建组件、绑定 props 和事件，同时注意卸载时清理副作用（比如富文本编辑器的全局事件监听）。
