核心是利用 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，影响加载效率。可进一步拆分：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• 把 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，无重复第三方脚本

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南