import() 是 JavaScript 动态导入语法，用于运行时按需加载模块，返回 Promise，支持条件判断、变量路径和任意作用域调用，区别于顶层静态 import。
什么是 import() 动态导入？
JavaScript 的 import() 是一个函数式语法，用于在运行时按需加载模块，而不是在模块初始化时就全部加载。它返回一个 Promise，这意味着你可以用 await 或 .then() 处理加载完成后的逻辑。
它和静态 import 语句有本质区别：静态导入必须写在顶层、不能加条件；而 import() 可以出现在任意作用域，支持变量拼接路径、条件判断、循环调用等。
- ✅ 支持字符串模板：
import(`./pages/${pageName}.js`) - ❌ 不支持表达式以外的路径：比如
import(someVar)中someVar必须是可静态分析的字符串（Webpack/Vite 会尝试做预构建，但太动态会 fallback 到 runtime 请求） - ⚠️ 浏览器原生支持，但旧版 Safari（
怎么在 React 路由中用 React.lazy + Suspense 实现路由级懒加载？
React.lazy 是对 import() 的封装，专为组件懒加载设计；Suspense 则负责处理加载中的 UI 状态。两者必须配合使用，且 Suspense 必须包裹其子组件（不能包裹 lazy 组件本身）。
const Home = React.lazy(() => import('./pages/Home'));
const About = React.lazy(() => import('./pages/About'));
<p>function App() {
return (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Suspense>
</Router>
);
}- ⚠️
React.lazy只支持默认导出（export default），不支持命名导出（export const X），否则会报undefined is not a component - ⚠️
Suspense在服务端渲染（SSR）中不生效，需搭配loadable-components或@loadable/component做降级 - ? 可把
fallback提取为独立 Loading 组件，避免内联 JSX 影响可维护性
为什么不用 require.ensure 或 System.import？
这两个都是 Webpack 早期的私有 API，已废弃多年。require.ensure 是 Webpack 1–2 的产物，System.import 曾短暂作为提案，但被标准 import() 取代。现代打包工具（Vite/Webpack 5+）只识别 import() 并自动切分 chunk。
适用于用户提出以下需求时：“构建赢回活动（win-back campaign）”、“重新激活已流失订阅者（re-engage lapsed subscribers）”、“执行重新授权 / 重新同意（re-permission / re-consent）清理”或“清理无效联系人列表（sunset my dead list）”；输出一个闭环式再激活方案——包括：流失用户群组（lapsed-cohort）定义、分阶段优惠阶梯（staged offer ladder）、重新授权（re-consent / re-p
立即学习“Java免费学习笔记（深入）”；
- ?
require.ensure在 Webpack 5 中已被移除，强行使用会报require is not defined（ESM 环境下） - ?
System.import在 Chrome 63+ 已弃用，控制台会警告System is not defined - ✅ 所有主流构建工具对
import()的代码分割（code splitting）支持成熟，chunk 名称、预加载、prefetch 都可通过 magic comments 控制，例如：/* webpackPrefetch: true */
懒加载不是万能的——哪些情况反而会拖慢首屏？
过度拆分或错误触发时机，会让懒加载从优化变成负优化。关键看资源是否「真·非首屏必需」。
- ❌ 把按钮点击就立刻用到的组件（如弹窗表单）设为懒加载：用户点一下才开始请求 JS，感知延迟明显
- ❌ 在
useEffect中无节制调用import()：可能触发多次重复加载，或与 React 渲染周期错拍，导致白屏或状态丢失 - ✅ 合理场景：路由切换、Tab 标签页切换、折叠面板展开、图片/视频播放器初始化
- ? 可结合
webpackChunkName注释让 chunk 更易识别：import(/* webpackChunkName: "chart-lib" */ 'echarts')
真正影响性能的，往往不是“有没有懒加载”，而是“什么时候加载”和“加载了什么”。比如一个 50KB 的工具函数被拆进每个路由 chunk，不如统一放 vendor；而一个 300KB 的图表库，只在特定页面用，就值得单独拆。
