动态导入（import()）是减小首屏体积最直接有效的手段之一，通过按需加载、路由级分割、细粒度拆分第三方库及合理处理加载态，显著提升TTI与用户体验。
动态导入（import()）是减小首屏体积最直接有效的手段之一——它让代码从“全量加载”变成“用时才取”，跳过非关键逻辑的初始下载与解析，从而显著缩短白屏时间与可交互时间（TTI）。
按需触发，避免无意义预加载
把原本在模块顶层同步引入的代码，改写为用户操作或条件满足时才执行的异步导入：
- 点击按钮再加载功能模块，比如“导出Excel”按钮不点就不加载
xlsx库 - 表单展开后才加载校验规则或富文本编辑器，而不是页面一打开就拉取
monaco-editor - 仅当用户进入某设置页，才导入对应配置面板组件，而非启动时全部打包进主 bundle
配合路由级代码分割
在 SPA 中，路由是天然的加载边界。利用框架支持的懒加载机制，把每个路由对应的组件拆成独立 chunk：
- React 中用
React.lazy()+Suspense包裹异步组件 - Vue 中用
defineAsyncComponent或直接在路由配置中写component: () => import('./About.vue') - 确保打包工具（如 Webpack、Vite）识别
import()并自动分包，无需额外配置
细粒度拆分第三方库
大型工具库往往只用到其中几个函数，却因同步引入导致整包打入首屏：
- 用
date-fns替代moment，再配合import { format, parseISO } from 'date-fns'精确引入 - 对
lodash使用lodash-es+ 按需导入，避免import _ from 'lodash'这种全量引用 - 重型依赖如图表库（
echarts）、PDF 渲染器（pdfjs-dist），统一用await import()封装成延迟加载逻辑
注意加载时机与用户体验衔接
动态导入虽快，但网络请求和解析仍有延迟，需合理处理等待态：
- 加 loading 提示或骨架屏，避免用户误以为卡死
- 对高频触发的操作（如搜索建议），可考虑预加载策略：
import('./SearchSuggest').then(...)在空闲时提前发起，但不立即执行 - 避免在渲染关键路径（如
useEffect初始化、mounted钩子）中阻塞式 await 导入，应结合状态管理做异步解耦
