不少刚接触Vue项目的同学，在配置路由时总会犯嘀咕，Vue Router懒加载到底是啥？为啥项目里都推荐用？自己动手咋实现？踩坑点又有哪些？今天咱们用问答的方式，把这些疑惑一个个拆明白

terry 1天前阅读数 18 #Vue

Vue Router懒加载到底是啥？

先想个场景：你做了个Vue项目，里面有首页、购物车、个人中心三个页面，要是不用懒加载，打包时会把这三个页面的代码全塞到一个JS文件里，用户打开网站时，得等这个大文件全下载完才能看到内容，哪怕用户只想看首页，也得等购物车、个人中心的代码下载，这就很“笨重”。

而路由懒加载是种“按需加载”的思路——只有当用户点击某个路由（比如从首页点进购物车）时，才去下载购物车页面的代码，就像点外卖，先看菜单（首页），点了宫保鸡丁（购物车）再现做,不用一来就把所有菜做好放桌上占地方。

技术上，它靠的是webpack的import()动态导入语法（Vue Router把这个能力封装得更友好），传统的import Home from './views/Home.vue'是静态导入，打包时直接合并；而const Home = () => import('./views/Home.vue')是动态导入，打包时会把Home组件单独拆成一个JS文件（叫chunk）,等需要时再加载。

为啥非用路由懒加载不可？

核心就一个字：快！但得拆成用户体验和技术层面来讲：

首屏加载速度起飞

用户打开网站，最关心“首页能不能秒开”，要是把所有页面代码打包成一个大文件，首屏得等整个文件下载，网络差时能卡到用户放弃，用懒加载后，首屏只加载首页代码，文件体积小了，下载、解析、渲染都更快，用户还没反应过来,首页就加载完了。

打包体积“瘦身”

没懒加载时，所有组件代码塞一块，打包后的JS文件可能几百KB甚至更大，用了懒加载，每个路由组件单独成块，初始加载的文件体积能砍一半以上，浏览器下载小文件比大文件快得多，尤其是移动端弱网环境下,这点太重要了。

SEO和用户留存双赢

搜索引擎爬取网站时，首屏加载快的页面更容易被收录（毕竟爬虫没耐心等你加载完所有代码），页面打开快，跳出率就低，停留时间长，转化概率也高，比如做企业官网，首页秒开和3秒开,用户流失率能差好几倍。

Vue Router懒加载咋实现？

这部分得结合代码和场景讲，分基础用法、进阶优化、Vue3特性三个角度：

基础：一行代码实现懒加载

不管Vue2还是Vue3,核心语法就这行：

// 路由配置文件（router.js）
const Home = () => import('./views/Home.vue')
const About = () => import('./views/About.vue')
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]

原理是webpack的代码分割：打包时，Home和About组件会被分别拆成独立的chunk（比如home.js、about.js）,只有访问对应路由时才会请求这些chunk。

进阶：分组打包减少请求

如果有几个关联紧密的小组件（产品介绍”下的三个子页面），每个都单独拆chunk会导致请求太多，这时候可以分组打包,把它们塞到一个chunk里：

// Vue Router提供的分组语法（需Vue Router 4+）
const [ProductIntro, ProductFeature, ProductCase] = Vue.lazyRouteGroup(
  () => import('./views/ProductGroup.vue'), 
  { chunkName: 'product-group' }
)
// 路由配置里正常用这三个组件
routes: [
{ path: '/product/intro', component: ProductIntro },
{ path: '/product/feature', component: ProductFeature },
{ path: '/product/case', component: ProductCase }
]

这样三个组件会被打包到product-group.js里，访问任意一个子页面时，这个chunk只下载一次,减少请求次数。

Vue3专属：Suspense配合加载提示

Vue3的组件能优雅处理“异步组件加载中”的状态，比如用户点进一个懒加载的路由，网络慢时页面会空白，加个“加载中”提示更友好：

<template>
  <Suspense>
    <template #default>
      <RouterView /> <!-- 渲染懒加载的路由组件 -->
    </template>
    <template #fallback>
      <div class="loading">拼命加载中...</div> <!-- 加载时显示 -->
    </template>
  </Suspense>
</template>

当路由组件的import()还在加载时，页面会显示fallback里的内容；加载完成后,自动替换成default里的RouterView。

用懒加载时要避开哪些坑？

看似简单的懒加载，实际项目里稍不注意就踩雷,这几个点要盯紧：

给chunk起“好记”的名字

默认打包后的chunk名字是数字（比如1.js、2.js），调试时根本分不清哪个对应哪个页面，可以用webpack的魔法注释,给chunk起语义化名字：

const Home = () => import(/* webpackChunkName: "home-page" */ './views/Home.vue')

这样打包后，这个chunk就叫home-page.js,调试时看Network面板一眼就懂。

处理慢网络下的用户体验

要是用户在山区信号差的地方，懒加载组件可能加载十几秒，这时候只靠Suspense不够，得自己加超时逻辑：比如3秒没加载完，提示“网络不佳，点击重试”，并提供重试按钮（触发路由重新加载）。

路由守卫里的异步冲突

比如在beforeEnter守卫里做权限判断（异步请求接口查权限），同时路由组件又是懒加载的，这时候要确保守卫的异步操作和组件加载顺序不冲突——比如先等权限接口返回，再加载组件，避免“权限还没判，组件已经开始加载”的逻辑错误。

旧项目的兼容性

如果是Vue2+webpack3的老项目，用import()可能报错，因为webpack3对动态导入支持不好，这时候得装@babel/plugin-syntax-dynamic-import插件,让Babel支持这种语法。

实际项目里效果有多明显？

拿我之前做的一个企业官网项目举例：

项目有首页、产品、案例、关于我们四个页面，总代码量（含UI库）大概800KB。

没开懒加载：打包后生成一个app.js（800KB），首屏加载时间（3G模拟）要4秒,用户还没等加载完就关页面了。
开了懒加载：首页组件+公共代码打包成app.js（200KB），产品、案例、关于我们分别生成product.js（250KB）、case.js（200KB）、about.js（150KB），首屏加载app.js只要1秒，用户一点产品页，才加载product.js,体验丝滑。

看Chrome开发者工具的Network面板更直观：没懒加载时，一开始就有个800KB的大请求；开了懒加载后，初始请求只有200KB,其他请求按需出现。

懒加载和其他优化手段咋配合？

路由懒加载不是孤立的,和这些手段结合能把性能拉满：

搭配keep-alive缓存组件

用包裹RouterView，懒加载的组件被缓存后，再次进入不会重新加载，但要注意缓存策略——比如用户长时间没操作，需要刷新数据时，得手动清除缓存,避免展示旧数据。

CDN加速chunk文件

把懒加载生成的chunk文件传到CDN（比如阿里云CDN、七牛云），用户访问时从离自己最近的节点下载,比从自己服务器下载快得多。

代码压缩+Tree Shaking

webpack的terser-webpack-plugin能压缩JS代码，sideEffects配置能实现Tree Shaking（删掉没用到的代码），和懒加载结合，每个chunk的体积能再减30%以上,加载更快。

总结下，Vue Router懒加载是前端性能优化的“必选项”——它用“按需加载”的思路，从首屏速度、打包体积、用户体验三个维度提升项目质量，实现起来门槛不高，但要注意命名、加载状态、兼容性这些细节；和keep-alive、CDN、代码压缩配合，能把性能榨到极致，下次配路由时，别再全量导入啦，试试懒加载，感受下页面“秒开”的快乐～