路由懒加载本身不直接减小 vendor.js 大小，但通过动态导入使组件及其依赖脱离主包，配合命名 chunk、调整 splitChunks（如 chunks: 'async'、提高 minChunks）、清理隐性引入，可将仅单点使用的第三方库从 vendor 中解耦，实现更精准的代码分割。
路由懒加载本身不直接减小 vendor.js 大小，但它能将原本打进 vendor 的第三方库“释放”出来，让 webpack 更精准地划分代码块——关键在于配合正确的分包策略和依赖管理。
理解 vendor.js 是什么
vendor.js 是 webpack 默认提取的“公共依赖包”，通常包含所有 node_modules 中被多个地方 import 的模块（比如 Vue、Vue Router、Axios、Lodash 等）。但默认行为容易把本该按需加载的库也塞进去，尤其当你在入口文件或全局逻辑中提前 import 了大量工具库时。
懒加载路由（import() 动态导入）真正起作用的环节是：它让组件及其子依赖（包括组件内部 import 的第三方模块）脱离主包，形成独立 chunk。如果这些组件里用了 Lodash、Moment、ECharts 等重型库，它们就不会再被强制归入 vendor，而是随组件 chunk 一起加载。
用动态 import + webpackChunkName 注释控制分包
不要只写 component: () => import('./views/Home.vue')，要主动命名 chunk，便于识别和优化：
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
- 给业务路由加明确 chunk 名：
component: () => import(/* webpackChunkName: "home" */ './views/Home.vue') - 对含重型依赖的页面单独切分：
component: () => import(/* webpackChunkName: "data-viz" */ './views/Analytics.vue')（里面用了 ECharts） - 避免匿名 chunk：不写注释会导致 webpack 自动生成 hash 命名（如
123abc.js），不利于长期缓存和分析
调整 splitChunks 配置，把“伪 vendor”请出去
很多项目 vendor 过大，是因为 webpack 把只在某个懒加载组件里用到的库（比如仅在 Report.vue 里用了 xlsx）也提进了 vendor——这是因默认 minChunks: 2 触发了误提。你需要收紧规则：
- 将
chunks: 'all'改为chunks: 'async'：只对异步 chunk（即懒加载的组件）做拆分，不再强拉同步代码里的依赖进 vendor - 提高
minChunks阈值（例如设为3或更高），或改用cacheGroups精准捕获真正复用的库：vue: { name: 'vue', test: /[\/]node_modules[\/](vue|vue-router|vuex)[\/]/, chunks: 'all' } - 排除仅单点使用的大型库：
xlsx: { name: 'xlsx', test: /[\/]node_modules[\/](xlsx)[\/]/, chunks: 'async' }→ 让它只出现在用到它的那个异步 chunk 里
检查并清理“隐性引入”
vendor 膨胀常源于你没意识到的 import：
- 全局
main.js里 import 了整个 Lodash：import _ from 'lodash'→ 改为按需：import debounce from 'lodash/debounce' - UI 库全量引入（如
import ElementUI from 'element-ui'）→ 改用 babel 插件按需加载，或手动 import 组件 - 在路由守卫、插件、mixin 等全局逻辑中提前 import 了业务组件或工具函数 → 移到实际使用处，或确保它们本身也是懒加载的
本质上，vendor.js 的大小反映的是“多处共用”的程度。懒加载不是银弹，但它是倒逼你梳理依赖关系的起点——把不该共享的库从 vendor 中解耦出来，让每个 chunk 只带它真正需要的东西。不复杂但容易忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
