核心是利用 splitChunks 抽离 node_modules 共用代码为独立 chunk，配置 chunks: 'all' 和 cacheGroups.vendor 匹配路径并命名 vendors.js，再按框架、工具库、大包分层拆分，结合动态 import 避免静态引入，最后用 bundle-analyzer 验证分离效果。
核心是利用打包工具的 splitChunks 机制，把多个模块共用的代码（尤其是 node_modules 中的第三方库）抽离成独立 chunk，避免重复打包、提升缓存复用率。
配置 splitChunks 提取 vendor
以 Webpack 为例，在 optimization.splitChunks 中明确识别并分离依赖：
- 设置
chunks: 'all'，确保同步和异步模块都参与分割 - 用
cacheGroups.vendor匹配node_modules路径，统一打到vendors.js - 指定
name: 'vendors'固定文件名，配合[contenthash]实现精准缓存
示例配置片段：
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
test: /[\/]node_modules[\/]/,
name: 'vendors',
priority: 10,
}
}
},
output: {
filename: '[name].[contenthash].js'
}
}
区分大小依赖，避免 vendor 过大
单一 vendors 文件可能达几 MB，影响加载效率。可进一步拆分：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
立即学习“Java免费学习笔记（深入）”；
- 把 React、Vue 等框架级依赖单独提取为
frameworks.js - 将 lodash、date-fns 等工具库归为
utils.js - 对特别大的包（如 monaco-editor、pdfjs-dist）单独配置
enforce: true强制切出
这样既保留复用性，又控制单个 chunk 体积在 200–500 KB 合理区间。
配合动态导入，让 vendor 真正“按需”生效
仅靠 splitChunks 不足以保证 vendor 被独立加载——还需避免静态 import 把它拉进主包：
- 检查入口文件（如
index.js）是否直接import React from 'react'，这会让 React 进入主 bundle - 改为用动态
import()加载非首屏强依赖，例如：if (needEditor) await import('monaco-editor') - 路由组件统一用
React.lazy+import()，确保对应 vendor 也随组件 chunk 分离
验证与持续优化
上线前务必确认效果：
- 运行
webpack-bundle-analyzer查看依赖图，确认 node_modules 模块已不在main.js中 - 检查生成的 dist 目录，应存在
vendors.[hash].js及其对应.map文件 - 打开浏览器 Network 面板，观察首屏是否只加载
main和vendors，无重复第三方脚本
