最直接有效的手段是路由级懒加载打头阵、组件级懒加载补缺口、分包策略控资源。优先将非首页页面改为动态import()，对业务关联组件加webpackChunkName归组，高频页用webpackPrefetch预加载；模态框等非首屏组件局部注册异步组件；抽离vendor.js并用splitChunks优化复用，配合keep-alive和suspense提升体验，避免过度拆分与首屏懒加载。
在 Vue 2 大型应用中，降低首屏包体积最直接有效的手段，就是把“用户打开首页时根本用不到的代码”从初始加载中彻底剥离。核心不是压缩文件，而是切断不必要的加载链——路由级懒加载打头阵，组件级懒加载补关键缺口，再配合分包策略让资源更可控。
路由级懒加载：必须优先落地的第一步
所有非首页的页面级组件，都不该打包进 app.js。只需把静态 import 改成动态 import()，Webpack 就会自动拆出独立 chunk：
-
正确写法：
component: () => import('@/views/UserList.vue') -
避免写法：
import UserList from '@/views/UserList.vue'（同步导入，全打进首包） - 对业务强关联的页面（如用户管理下的列表、编辑、详情），加命名注释统一归组：
() => import(/* webpackChunkName: "user-module" */ './UserEdit.vue')，防止生成十几个零散小文件 - 登录后高频访问的首页或仪表盘，可加预加载提示：
() => import(/* webpackPrefetch: true */ './Dashboard.vue')，浏览器空闲时提前拉取，跳转几乎无感
组件级懒加载：只在用到时才加载非关键模块
适合模态框、图表、富文本编辑器、第三方 UI 组件等“非首屏必需”的部分。Vue 2 中通过 Vue.component 或局部注册实现：
- 全局注册异步组件：
Vue.component('AsyncChart', () => import('@/components/Chart.vue')) - 局部注册（推荐）：
components: { AsyncModal: () => import('@/components/Modal.vue') } - 特别注意：不要对首屏立即渲染的组件（如导航栏、轮播图）做懒加载，否则会造成可见区域闪烁或延迟
分包与缓存策略：让加载更高效、更稳定
光拆不够，得让拆出来的代码块加载得聪明：
立即学习“前端免费学习笔记（深入）”；
- 抽离公共依赖：在 webpack 配置中用
optimization.splitChunks把 vue、vue-router、lodash 等稳定依赖单独打包为 vendor.js，便于长期缓存 - 复用 chunk：相同路径下多个组件引入同一工具函数时，确保它们被归入同一个 chunk，避免重复下载
- 搭配
<keep-alive>缓存已加载的路由组件，返回时不重新请求；对可能失败的懒加载，可包裹<suspense>（需 Vue 2.6+ 或插件支持）并设 fallback 提示
别踩这些坑
懒加载不是拆得越细越好：
- 过度拆分会导致 HTTP 请求数暴增，尤其在弱网下得不偿失；建议按业务域（如 user-module、order-module）分组，每组 2–5 个相关组件较合理
- 首页本身也别“懒”——Home、Header、Footer 这类首屏必现内容，必须同步加载，否则白屏时间反而更长
- 记得用
webpack-bundle-analyzer定期分析产物，确认 vendor.js 和 app.js 体积是否明显下降，验证优化是否生效
