vendor.js过大的本质是第三方依赖未按需拆分；需通过懒加载移出页面级依赖、splitchunks精准分包、按需引入替代全量引用三者协同优化，并用bundle analyzer验证。
Vue 或 React 项目中，vendor.js 过大（如超 1MB），本质是第三方依赖（如 lodash、moment、ant-design、echarts 等）被全部打包进 vendor，且未做按需拆分。组件懒加载本身不直接压缩 vendor.js，但它能配合代码分割（Code Splitting），把部分本该进 vendor 的逻辑“移出”，从而间接减小 vendor 体积。关键在于：**懒加载 + 正确的分包策略 + 按需引入**三者协同。
明确懒加载的真正作用对象
组件懒加载（如 Vue 的 defineAsyncComponent 或 React 的 lazy）主要影响的是业务路由组件或非首屏模块，它让这些组件及其直接依赖在首次访问时才加载，生成独立的 chunk（如 chunk-xxx.js）。这不会减少 vendor.js 本身，但能：
- 避免把路由组件里 import 的大型工具库（比如某页面用了
import { debounce } from 'lodash'）错误地打入 vendor - 将页面级依赖（如仅 A 页面用的
pdfjs-dist）从 vendor 中剥离，单独成 chunk - 降低首屏 JS 总体积（即使 vendor 仍大，但首屏只加载 vendor + home chunk，其余延迟加载）
配合 webpack / Vite 的分包策略精准瘦身
单靠懒加载不够，必须配置构建工具把第三方库合理分流。以 webpack 为例，在 configureWebpack.optimization.splitChunks 中设置：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
-
限制 vendor 合并范围：关闭默认的
chunks: 'all'，改为chunks: 'async'，避免把同步 import 的第三方库全塞进 vendor -
按大小和复用次数拆分：设置
minSize: 20000（20KB）、minChunks: 2，防止小而散的包；对超大库单独命名，例如：{ name: 'chunk-echarts', test: /[\/]node_modules[\/](echarts|zrender)[\/]/ } -
抽离运行时：启用
runtimeChunk: 'single'，避免 vendor 变动导致所有 chunk hash 失效
根治源头：停止全量引入，改用按需 + 自定义封装
很多 vendor 膨胀源于开发习惯。例如：
- 写
import _ from 'lodash'→ 改为import debounce from 'lodash/debounce'或用babel-plugin-lodash - 用
import moment from 'moment'→ 改用import dayjs from 'dayjs'（更轻）+dayjs/plugin/customParseFormat（按需加载插件） - Ant Design 全量引入 → 配合
babel-plugin-import，或升级到 v5 使用官方推荐的use方式（自动按需） - 自己封装高复用工具函数，避免重复 npm 安装轻量库（如用 20 行代码替代
is-url）
验证与持续监控
执行 npm run build -- --report（webpack-bundle-analyzer），打开可视化报告，重点关注：
- vendor.js 中是否还残留业务代码或单页专用依赖
- 新生成的 async chunk 是否合理（如
chunk-detail-page.js包含了该页专属 UI 组件 + 对应工具函数） - node_modules 下哪些包占比最高，针对性优化（查文档看能否 Tree Shaking 或替换）
将 bundle 分析加入 CI 流程，设置体积阈值告警（如 vendor > 800KB 自动失败），防止回归。
