代码分割配合动态导入 import() 可按需加载模块，减少首屏体积；支持路由拆分、预加载、SSR 适配及公共依赖提取，提升首屏性能与用户体验。
JavaScript 代码分割（Code Splitting）配合动态导入（import()），能有效减少首屏加载体积，让页面更快可交互。核心思路是：不把所有代码打包进一个大文件，而是按需加载真正需要的模块。
动态导入 import() 是实现按需加载的关键
import() 返回一个 Promise，支持在运行时决定加载哪个模块，适合路由切换、条件加载、交互触发等场景。它和静态 import 不同，不会被 Webpack/Vite 等工具在构建时提前解析并合并进主包。
- 语法简单：
const module = await import('./utils.js');或import('./modal.js').then(mod => mod.show()); - 支持表达式和变量路径（但不能是完全动态拼接，如
import(`./${name}.js`)中name需为编译期可分析的值，否则会打包所有匹配文件） - 现代浏览器原生支持，无需额外 polyfill（IE 不支持，需降级处理）
结合路由做代码分割，显著降低首屏 JS 体积
单页应用（SPA）中，用户首次访问通常只看首页，却下载了所有路由对应的逻辑。用动态导入拆分路由组件，就能避免这种浪费。
- React 示例（配合
React.lazy+Suspense）：const About = React.lazy(() => import('./pages/About'));<br><Suspense fallback="<div>Loading...</div>"><br> <About /><br></Suspense> - Vue Router 示例：
const routes = [{<br> path: '/admin',<br> component: () => import('./views/Admin.vue')<br>}]; - 注意搭配骨架屏或 loading 状态，提升用户感知体验
提取公共依赖 + 预加载策略，进一步优化体验
仅靠代码分割还不够。模块间可能重复引用同一库（如 lodash），需用 SplitChunksPlugin（Webpack）或 build.rollupOptions.output.manualChunks（Vite）提取公共 chunk。
立即学习“Java免费学习笔记（深入）”；
- 对关键后续模块（如用户大概率会点击的“登录弹窗”），可用
import('xxx').then(...)后立即调用prefetch或preload（Webpack 支持注释语法：/* webpackPrefetch: true */） - Vite 中可在
import()后手动调用document.createElement('link').rel = 'prefetch'实现类似效果 - 慎用 preload：只用于很快会被用到的资源；prefetch 更适合空闲时加载
服务端渲染（SSR）与动态导入需协同处理
Node.js 环境不支持原生 import()（除非启用实验性 flag），且 SSR 需同步获取组件。常见解法：
- 使用
loadable-components（React）或@vue/composition-api的defineAsyncComponent（Vue 2/3），它们自动处理 SSR 降级（服务端直出占位，客户端再 hydrate） - 确保异步组件导出的是默认对象（
export default {...}），避免 SSR 解构失败 - 检查打包工具是否将动态导入模块正确生成为独立 chunk，并输出对应
.js文件供客户端请求
