Webpack代码分割核心是拆大包、按需加载并抽离vendor：通过splitChunks配置（如chunks:'all'、cacheGroups匹配node_modules）提取第三方库，配合动态import()语法生成异步chunk实现运行时加载。
Webpack 实现代码分割，核心是把大包拆小、按需加载，同时把第三方库（vendor）单独抽离。关键靠 optimization.splitChunks 配置 + 动态 import() 语法，两者配合才能兼顾构建时提取和运行时加载。
Vendor 提取：用 splitChunks 分离 node_modules
Webpack 默认不会自动提取 vendor，必须显式配置 splitChunks.cacheGroups：
-
启用 async 模式：设置
chunks: 'async'（只处理动态导入的模块），或'all'（含入口同步模块，更彻底） -
匹配 node_modules：用正则
/[\/]node_modules[\/]/识别第三方依赖 -
指定输出名与复用规则：例如设
name: 'vendors'，并加enforce: true强制提取，避免被合并回主包
典型配置示例：
optimization: {splitChunks: {
chunks: 'all',
minSize: 20000,
cacheGroups: {
vendors: {
test: /[\/]node_modules[\/]/,
name: 'vendors',
enforce: true
}
}
}
}
按需加载：用动态 import() 触发异步 chunk
静态 import 会在构建时全量打包；换成 import() 函数调用，Webpack 就会自动生成独立 chunk，并在运行时请求加载：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
- 在 React 中，配合
React.lazy()和Suspense使用，例如：const Page = React.lazy(() => import('./pages/Home')) - 普通 JS 场景可直接
import('./utils/chart').then(...)，适合按钮点击、表单提交等交互触发点 - Webpack 会为每个
import()调用生成一个带 hash 的 chunk 文件，如2.a1b2c3.js
进阶控制：命名 chunk 与预加载
默认 chunk 名是数字 ID，不利于调试和缓存管理。可通过注释指令干预：
-
import(/* webpackChunkName: "home-page" */ './pages/Home')→ 输出home-page.[hash].js -
import(/* webpackPrefetch: true */ './modules/report')→ 浏览器空闲时预取，提升后续访问速度 -
import(/* webpackPreload: true */ './components/Modal')→ 关键资源提前加载，减少等待
验证是否生效
构建后检查 dist/ 目录：应出现 vendors.[hash].js、home-page.[hash].js 等独立文件；打开浏览器 DevTools 的 Network 面板，切换路由或触发懒加载动作，能看到对应 chunk 的按需请求，而非全部在首页加载。
