react router v6中路由懒加载需用lazy定义组件变量再以包裹，vue router 4须用defineasynccomponent封装异步组件，原生import()需手动处理promise，webpack旧api require.ensure已废弃。
React Router v6 中用 lazy + Suspense 实现路由级组件懒加载
这是最常见也最稳妥的按需加载方式，适用于基于 React Router 的单页应用。核心是把组件定义从同步 import 改成 React.lazy 包裹的动态 import()，再用 Suspense 处理加载状态。
常见错误是直接在 Route 的 element 里写 lazy(() => import('./Foo')) —— 这会报错，因为 element 要求是已渲染的 React 元素，不是 lazy 组件。
- 必须先用
lazy定义组件变量，再在element中用<lazycomponent></lazycomponent>形式使用 -
Suspense必须包裹整个Routes或至少包裹所有带 lazy 组件的Route，不能只包单个 Route - 服务端渲染（SSR）时
lazy不可用，需配合loadable-components或 RSC 方案
import { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';
<p>const Home = lazy(() => import('./pages/Home'));
const Dashboard = lazy(() => import('./pages/Dashboard'));</p><p>function App() {
return (
<Suspense fallback={<p>Loading...</p>} >
<Routes>
<Route path="/" element={<Home />} />
<Route path="/dashboard" element={<Dashboard />} />
</Routes>
</Suspense>
);
}Vue Router 4 的 defineAsyncComponent 替代 import()
Vue 3 推荐用 defineAsyncComponent 封装异步组件，而不是裸写 import()。它能统一处理加载、超时、错误状态，且和 Vue 的响应式系统兼容更好。
立即学习“Java免费学习笔记（深入）”；
容易忽略的是：如果直接在 routes 配置里写 component: () => import('./About.vue')，虽然能工作，但无法自定义 loading 和 error 状态，也不支持 SSR 友好写法。
- 必须用
defineAsyncComponent包一层，才能传入loading、error、delay、timeout等选项 - 错误组件（
errorComponent）接收一个errorprop，可用来展示具体错误信息，比如网络失败或 404 - Vite 默认对
import()做 code splitting，但 Webpack 需确认optimization.splitChunks开启
import { defineAsyncComponent } from 'vue';
import { createRouter } from 'vue-router';
<p>const About = defineAsyncComponent({
loader: () => import('./views/About.vue'),
loadingComponent: () => import('./components/Loading.vue'),
errorComponent: () => import('./components/Error.vue'),
delay: 200,
timeout: 5000
});</p><p>export const router = createRouter({
routes: [
{ path: '/about', component: About }
]
});原生 JavaScript 中手动触发 import() 加载模块
不依赖框架时，import() 是唯一标准方案。但它返回 Promise，必须显式处理 resolve 和 reject，不能当同步函数用。
典型误用是写成 import('./utils.js').then(...) 后直接调用导出函数，却没考虑模块是否已加载完成；或者在事件回调里反复调用 import() 导致多次加载同一模块。
- 模块加载后，
import()返回的 Promise 会缓存结果，重复调用会立刻 resolve，无需手动去重 - 想预加载（preload）可提前在空闲时调用
import()，但不要 await，避免阻塞主流程 - 错误捕获必须用
.catch()或try/catch，否则会变成 unhandled rejection
async function loadChartLib() {
try {
const { Chart } = await import('chart.js');
new Chart(ctx, { /* config */ });
} catch (err) {
console.error('Failed to load chart.js:', err);
// 可 fallback 到静态图或提示用户重试
}
}
<p>// 某个按钮点击时才加载
document.getElementById('show-chart').addEventListener('click', loadChartLib);Webpack 的 require.ensure 已废弃，别再用
老项目里可能还看到 require.ensure 或 require(['./mod'], callback)，这些是 Webpack 1–3 的私有 API，Webpack 5 已彻底移除，升级后会直接报 require is not defined 或 require.ensure is not a function。
迁移时不能只改语法，还要检查 chunk 命名、公共依赖提取逻辑是否受影响。Vite 用户则完全不用操心这些，import() 原生支持且默认分包。
- 所有
require.ensure必须替换成import()+ Promise 链 - 原来用
webpackChunkName注释的，要改成/* webpackChunkName: "xxx" */放在import()前一行 - UglifyJS 等旧压缩工具不识别
import()，需确认构建链路已升级到支持 ES2015+ 动态导入的版本
// ✅ 正确：Webpack 5 / Vite 支持的魔法注释
const Profile = lazy(() => import(/* webpackChunkName: "profile" */ './Profile'));
<p>// ❌ 错误：Webpack 5 中 require.ensure 已不存在
// require.ensure([], () => { ... });真正难的不是写对那一行 import()，而是判断该在哪拆、拆多细、要不要预加载、错误时怎么降级——这些都得结合首屏性能指标、用户行为路径和部署环境来定。
