es6动态导入import()是返回promise的函数，支持运行时按需加载和自动代码分割；路径需静态可分析，常用于路由懒加载、条件加载和国际化，需注意错误处理与ssr兼容性。
ES6 动态导入 import() 是一个返回 Promise 的函数，它让模块可以在运行时按需加载，配合打包工具（如 Webpack、Vite、Rollup）能自动实现代码分割（code splitting），无需手动配置复杂逻辑。
动态 import() 的基本用法
与静态 import 不同，import() 是一个函数调用，接收模块路径字符串（支持变量拼接，但不能是完全动态的表达式，如 import(someVar) 会报错），返回 Promise，resolve 出模块对象：
button.addEventListener('click', async () => {
const module = await import('./utils.js');
module.doSomething();
});
也可用 .then() 风格：
import('./math.js').then(({ add, multiply }) => {
console.log(add(2, 3));
});
Javascript Sdk
下载
用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。
配合打包工具实现自动代码分割
Webpack/Vite 等工具识别 import() 后，会把目标模块及其依赖单独打包成一个 chunk（如 utils.abc123.js），只在调用时才下载执行。关键点：
- 路径必须是可静态分析的：支持字符串字面量、模板字符串中的固定部分（如
import(`./pages/${page}.js`)中page若为常量或有限枚举值，工具仍可分割；若完全不可知则回退到单个 bundle - chunk 名称可自定义：通过 webpackPrefetch / webpackChunkName 注释控制（Webpack）：
import(/* webpackChunkName: "login" */ './login.js') - Vite 中直接写
import('./xxx.js')即可，自动加 hash、生成独立 chunk，并支持预加载（import.meta.preload）
常见按需加载场景与写法
实际开发中，动态 import() 常用于以下场景：
-
路由级懒加载：React Router / Vue Router 中，组件用
import()包裹，实现页面级拆包
const Home = () => import('./views/Home.vue'); -
条件性功能加载：比如只有用户点击“编辑”才加载富文本编辑器
document.getElementById('edit-btn').onclick = async () => {
const { default: Editor } = await import('tinymce');
new Editor(...);
}; -
国际化语言包：根据 locale 加载对应翻译文件
const loadLocale = (lang) => import(`./locales/${lang}.json`);
注意事项与优化建议
使用 import() 时需注意几个易忽略的细节：
- 不能在模块顶层（非函数作用域）直接调用
import()，否则语法错误；必须包裹在函数、事件、条件块中 - 错误处理很重要：应捕获加载失败（如网络中断、404），避免白屏或静默失败
import('./heavy-module.js')
.catch(err => console.error('加载失败:', err)); - 可结合
Promise.all()并行加载多个模块，减少总延迟
await Promise.all([
import('./a.js'),
import('./b.js')
]); - 服务端渲染（SSR）需兼容：Node.js 不原生支持
import()字符串路径，需用require()或工具链（如 Vite SSR 模式）统一处理
