Webpack代码分包与按需加载需协同动态import()、splitChunks配置及输出命名规则：用import()触发异步加载并配合webpackChunkName命名；splitChunks提取公共依赖如vendors；output设chunkFilename为[name].[contenthash:8].js以优化缓存与调试。
Webpack 的代码分包与按需加载不是靠“开关”一键开启，而是通过组合动态导入语法、合理配置 splitChunks 和输出命名规则来协同实现的。核心在于：让真正用到的代码，在真正需要时才加载，且加载的 chunk 尽可能独立、可缓存、易调试。
用动态 import() 触发按需加载
这是最直接、最可控的按需加载方式，适用于按钮点击、条件弹窗、功能模块切换等场景：
- 写法必须是
import()函数调用，不能是静态import；它返回 Promise，支持await或.then() - 推荐配合“魔法注释”命名 chunk，便于调试和长期缓存：
import(/* webpackChunkName: "pdf-viewer" */ './components/PdfViewer.vue') - 若希望用户空闲时预加载（比如用户大概率下一步会点“报表”），可用：
import(/* webpackPrefetch: true */ './modules/Report.js')（构建后自动注入<link rel="prefetch">）
配置 splitChunks 实现智能公共代码提取
光靠动态 import 不够——多个异步模块可能重复引入 lodash、moment 等依赖。splitChunks 能自动识别并抽离共用部分：
- 启用基础策略（通常放在
optimization.splitChunks中）：chunks: 'async'（只处理异步加载的模块，不影响首屏） - 设置最小体积阈值避免过度拆分：
minSize: 20000（20KB，小于该值不单独成 chunk） - 把 node_modules 里的第三方库统一打到
vendors.js：cacheGroups: { vendors: { test: /[\/]node_modules[\/]/, name: 'vendors', priority: 10 } }
规范输出文件名，提升可维护性
默认生成的 123abc.js 类似文件名不利于排查问题，也影响长期缓存策略：
立即学习“Java免费学习笔记（深入）”；
- 在
output中配置：chunkFilename: '[name].[contenthash:8].js'—— 异步 chunk 使用命名 + 内容哈希 -
filename: '[name].[contenthash:8].js'用于入口文件（如 main.js） - 注意：
[name]能生效的前提是：动态 import 用了webpackChunkName，或cacheGroups显式指定了name
搭配路由做页面级懒加载（SPA 最常用场景）
单页应用天然适合以路由为单位切分，用户访问 /user 时，只加载 User 页面相关 JS/CSS：
- Vue Router：
{ path: '/user', component: () => import('@/views/User.vue') } - React Router v6+：
const User = React.lazy(() => import('./User')); <suspense fallback="{<Loading"></suspense>}><user></user> - Vite 和 Webpack 都原生支持，无需额外插件；构建后自动生成类似
User.4a2b3c.js文件
