Webpack 4+ 应用 splitChunks 精准分离第三方库与业务代码：通过 test 匹配 node_modules、name 设为 vendors、priority 设为 10、chunks 设为 all，并配置 runtimeChunk: { name: 'runtime' } 避免 hash 误变，再按需对 antd 等大库单独分组或设置 minSize: 300000 控制体积。
分离第三方库与业务核心代码，核心是让两类代码各自独立打包、互不干扰，从而提升缓存命中率和加载效率。关键不在“能不能分”，而在于“分得稳、分得准、分得可持续”。
用 splitChunks 精准识别并提取 node_modules
Webpack 4+ 推荐直接使用 optimization.splitChunks，不再依赖已废弃的 CommonsChunkPlugin。配置要点如下：
- test: /[\/]node_modules[\/]/ —— 精确匹配所有第三方依赖路径
- name: 'vendors' —— 统一输出为 vendors.[contenthash].js，便于 CDN 缓存长期复用
- priority: 10 —— 确保第三方库优先被抽离，避免被 common 组误吞
- chunks: 'all' —— 同时处理同步和异步模块（比如动态 import 的库）
避免业务代码变动导致 vendor hash 失效
即使只改了一行业务逻辑，如果 vendor 包 hash 也跟着变，说明运行时代码（runtime）混进了 vendor 中。必须额外配置：
- runtimeChunk: { name: 'runtime' } —— 单独提取 webpack 运行时逻辑
- 这样 vendor 只含纯第三方代码，只要不升级 React、Lodash 等，它的 contenthash 就永不变化
- 用户首次访问加载一次 vendors.js，后续更新仅替换 runtime 和业务 chunk，缓存利用率大幅提升
按需拆大库，防止 vendors 文件臃肿
像 antd、lodash、moment 这类体积大的库，全塞进一个 vendors.js 容易超 1MB，反而影响首屏。可进一步细化：
- 为特定大库单独建 cacheGroup，例如：antd: { test: /[\/]node_modules[\/](antd|@ant-design)[\/]/, name: 'antd', priority: 20 }
- 或对超过 300KB 的模块自动切割：minSize: 300000（配合 maxInitialRequests 控制并发请求数）
- 这样既保留缓存优势，又避免单文件过大拖慢加载
验证是否真正分离成功
打包后检查 dist 目录和生成的 stats.json：
- vendors.js 中不应出现任何 src/ 或 business/ 相关路径
- 业务 chunk（如 app.js）里不应再有 require('react') 或 import _ from 'lodash' 的痕迹
- 浏览器 Network 面板中，vendors.js 的 Last-Modified 时间应长期不变，而 app.js 频繁更新
