动态导入（import()）配合Webpack、Vite等打包工具可自动实现代码分割，生成独立chunk文件，支持按需加载、预加载、懒加载及长期缓存，需确保路径可静态分析。
动态导入（import()）配合打包工具（如 Webpack、Vite 或 Rollup）时，会自动将被导入的模块及其依赖提取为独立的代码块（chunk），无需额外配置即可实现按需加载和代码分割。
Webpack 中的动态导入与 chunk 生成
Webpack 会自动识别 import() 表达式，并将其作为代码分割点，生成单独的 chunk 文件（如 123.a4b5c6.js）。关键在于确保模块路径是“可静态分析”的（即不包含完全动态拼接的变量）。
- ✅ 支持：使用模板字符串或固定路径，如
import(`./pages/${page}.js`)（Webpack 能推断出所有可能的page值） - ❌ 不支持：完全运行时拼接，如
import(someVar + '.js')，会导致无法分割，回退为内联模块或构建报错 - 可通过
webpackChunkName注释指定 chunk 名称：import(/* webpackChunkName: "user-profile" */ './UserProfile.js')→ 输出文件名含user-profile
Vite 中的自动 chunk 分割
Vite（基于 Rollup）默认启用动态导入分块，且对路径分析更宽松。它会在构建时扫描 import() 并生成对应 chunk，同时支持预加载提示（import.meta.webpackIgnore 等非必需，Vite 默认处理）。
- 默认输出格式为
chunk-xxxxx.js，可通过build.rollupOptions.output.manualChunks进一步自定义分组 - 开发时热更新精准，仅重载被修改的 chunk 及其依赖
- 支持
import(/* ?url */ './asset.png')等资源导入，也生成独立 chunk 或 base64/URL
控制 chunk 输出与加载行为
生成独立 chunk 后，还可通过配置优化加载时机与缓存策略：
立即学习“Java免费学习笔记（深入）”；
-
懒加载触发时机：动态
import()本身即懒加载，调用时才发起请求；可结合IntersectionObserver或路由守卫延迟执行 -
预加载/预获取：Webpack 支持
/* webpackPrefetch: true */，Vite 支持import(/* vitePreload */ ...)，让浏览器空闲时提前拉取 -
避免重复 chunk：利用
splitChunks（Webpack）或manualChunks（Vite/Rollup）复用公共依赖，防止相同模块被打包进多个 chunk -
命名与哈希：启用
output.chunkFilename（Webpack）或build.rollupOptions.output.entryFileNames（Vite），配合 contenthash 实现长期缓存
常见问题与验证方式
确认 chunk 是否成功生成，可查看构建产物目录或浏览器 Network 面板：
- 构建后检查
dist/目录是否存在多个.jschunk 文件（非仅main.js） - 打开 DevTools → Network → 切换到 JS 类型，点击触发动态导入的操作，观察是否发起新 JS 请求
- 在 Chrome 的 Coverage 面板中查看哪些 chunk 被实际执行，验证按需加载有效性
- 若 chunk 未分离，检查是否误用了
require.ensure（已废弃）或路径不可分析，或开启了optimization.splitChunks.chunks: 'all'但未命中条件
