动态 import() 是实现代码分割最直接有效的方式，它让模块在运行时按需加载，减少首屏体积、提升初始加载速度；与静态 import 必须在顶层声明不同，import() 是返回 promise 的函数调用，可置于任意位置，支持模板字符串和变量拼接，生成独立 chunk。
JavaScript 中的动态 import() 是实现代码分割（Code Splitting）最直接有效的方式，它让模块在运行时按需加载，从而显著减少首屏资源体积，提升页面初始加载速度。
动态 import() 与静态 import 的核心区别
静态 import 必须写在模块顶层，会在构建时被 Webpack、Vite 等工具静态分析并打包进初始 bundle；而 import() 是一个返回 Promise 的函数调用，可出现在任意位置（条件语句、事件回调、路由切换中），支持字符串模板和变量拼接，真正实现“需要时才加载”。
- 静态导入：
import { foo } from './utils.js'→ 打包时确定，必进主包 - 动态导入：
const { foo } = await import('./utils.js')→ 运行时触发，生成独立 chunk
常见适用场景及写法示例
动态导入最适合那些非首屏必需、用户行为触发或条件性使用的逻辑模块。
Javascript Sdk
下载
用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。
-
路由级分割：SPA 中配合 React Router 或 Vue Router，每个路由组件单独拆包
const Home = () => import('./pages/Home.vue')（Vue）或const About = React.lazy(() => import('./pages/About'))（React） -
按钮点击加载功能模块：例如“导出 Excel”功能只在用户点击后加载对应库和逻辑
button.addEventListener('click', async () => { const { exportToExcel } = await import('./features/export.js'); exportToExcel(data); }); -
根据环境或配置按需加载：如仅在开发环境加载调试工具
if (process.env.NODE_ENV === 'development') { const { debugTool } = await import('./debug/tool.js'); debugTool.init(); }
构建工具如何识别并处理动态 import()
主流构建工具会自动将 import() 调用转化为异步 chunk，并生成对应的资源文件。关键点在于路径必须是可静态分析的——不能是完全运行时拼接的字符串（如 import(url)），但支持模板字面量和有限变量。
- ✅ 支持：
import(`./locales/${lang}.js`)、import('./features/' + featureName + '.js')（部分工具支持） - ❌ 不支持：
import(someUrl)、import(`${base}/module.js`)（若 base 是运行时变量） - Vite/Webpack 默认为每个
import()创建独立 chunk，可通过魔法注释控制命名和预加载：import(/* webpackChunkName: "editor" */ './editor.js')import(/* webpackPrefetch: true */ './analytics.js')
加载状态与用户体验优化
动态导入本质是异步操作，需主动处理加载中、成功、失败状态，避免白屏或报错中断流程。
- 用
try/catch捕获加载失败（如网络中断、404）并提供降级方案或提示 - 结合骨架屏、loading 指示器提升感知性能，尤其在路由跳转或大模块加载时
- 对非关键模块可使用
import().catch(() => {})静默失败，不影响主流程 - 必要时利用
import().then().catch()链式处理，或封装成可复用的加载函数
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
