按需加载的核心是动态 import() 语法，配合打包工具自动分块；需在函数作用域使用，适用于路由懒加载、命名 chunk 和预加载，同时避免过度拆分与忽略加载状态。
模块按需加载的关键是让代码只在真正需要时才下载和执行，而不是启动就全量加载。核心手段是动态 import() 语法，配合打包工具的自动分块能力，无需复杂配置就能生效。
用动态 import() 替代静态 import
静态 import 在构建时就被打包进主 bundle，而 import() 是一个返回 Promise 的函数，Webpack 和 Vite 都能自动识别它为代码分割点：
- ❌ 不推荐（全量打包）：
import { format } from 'date-fns'; - ✅ 推荐（按需加载）：
const { format } = await import('date-fns/format');或import('date-fns/format').then(...)
注意：动态 import() 必须写在函数作用域内，比如事件回调、组件挂载逻辑或路由守卫中，不能直接放在模块顶层。
结合路由做页面级懒加载
单页应用天然适合按路由拆分，访问哪个路径就只加载对应页面代码：
立即学习“Java免费学习笔记（深入）”；
- Vue Router 示例：
{ path: '/user', component: () => import('@/views/User.vue') } - React Router v6+ 示例：
const User = React.lazy(() => import('./User'));，配合<Suspense fallback="..."> - Vite 与 Webpack 均原生支持，无需插件；构建后会生成独立 chunk 文件，如
User.abc123.js
给 chunk 命名并控制预加载行为
默认 chunk 名是哈希值，不利于调试和缓存管理。可通过“魔法注释”增强可维护性：
- 命名 chunk：
import(/* webpackChunkName: "charts" */ './charts/LineChart.vue')（Webpack）或import(/* @vite-ignore */ './charts/LineChart.vue')（Vite 兼容写法） - 空闲时预取（适合用户大概率后续访问）：
import(/* webpackPrefetch: true */ './ReportModule.js') - Vite 构建阶段会自动注入
<link rel="modulepreload">，提升二级页面加载速度
避免常见陷阱
按需加载不是越多越好，需兼顾网络请求数与复用率：
- 慎用过度拆分：每个小工具函数都单独
import()可能导致大量 HTTP 请求，反而拖慢体验 - 确保公共依赖被提取：Webpack 的
splitChunks.chunks = 'all'能把多个异步模块共用的库（如lodash-es）抽到公共 chunk 中 - 必须处理加载状态：Vue 用
v-if控制 loading 层，React 用Suspensefallback，否则白屏明显 - 第三方库优先轻量化：用
date-fns替代moment，用lodash-es+ 按需导入，比动态加载整包更高效
