动态 import() 是 JavaScript 原生按需加载机制，可减小首屏体积，适用于路由拆分、功能模块延迟加载、关键模块预加载，并需配合构建工具优化代码分割与缓存。
动态 import() 是 JavaScript 原生支持的按需加载机制，能显著减少首屏 JS 体积，避免一次性加载整个应用代码，特别适合大型单页应用（SPA）的性能优化。
用动态 import 拆分路由组件
把不同路由对应的组件从主包中分离，只在用户访问该路由时才加载对应模块。配合 React Router、Vue Router 等框架的懒加载能力效果更佳。
- React 示例：用
React.lazy+Suspense包裹动态导入的组件 - Vue 示例：在路由配置中直接使用
component: () => import('./views/Dashboard.vue') - 注意：不要对高频访问或首屏强相关的路由过度拆分，否则可能增加白屏等待时间
按功能模块延迟加载非核心逻辑
将编辑器、图表库、PDF 渲染、富文本等重型依赖封装成独立模块，在用户触发对应操作时再加载。
- 例如点击“导出报表”按钮后，再
import('./utils/exporter.js') - 可结合
Promise.all()同时加载多个相关模块，避免串行等待 - 加载失败时应提供降级方案（如提示“功能暂不可用”，而非整个页面崩溃”）
预加载关键模块提升后续体验
动态 import 返回 Promise，可在用户大概率要进入某流程前主动触发加载（不 await），实现“静默预加载”。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
- 比如用户鼠标悬停在“设置”菜单上时，提前
import('./pages/Settings.js') - 用
const modulePromise = import('./module.js')存住 Promise，真正需要时再await modulePromise - 避免在初始化阶段集中触发大量预加载，防止带宽争抢和主线程阻塞
配合构建工具做代码分割与命名
Webpack/Vite/Rollup 默认支持动态 import 的自动代码分割，但需注意输出配置以提升缓存效率。
- 给 import 添加 webpackChunkName 注释（如
/* webpackChunkName: "chart-lib" */），让生成的 chunk 文件名可读且稳定 - Vite 中可通过
build.rollupOptions.output.manualChunks进一步控制第三方库的拆分策略 - 确保 HTTP 缓存头（如
Cache-Control: public, max-age=31536000）对 chunk 文件生效，利用长期缓存
动态 import 不是银弹，需结合实际用户行为、网络环境和模块大小权衡拆分粒度。小模块频繁 import 可能增加请求数，大模块拆太细又失去意义。重点优先处理首屏无关、体积大、调用频次低的代码块。
