Vue 路由懒加载_vue3路由懒加载

---

上一节《Webpack5 动态导入按需加载》提到了按需加载路由模块，所以这节课我们讲下Vue项目中路由懒加载的具体用法和原理。

一、 为什么需要Vue路由懒加载？

在Vue应用程序开发中，路由懒加载是一项重要的技术，可以帮助提高应用性能和用户体验。

我们在路由中通常会定义很多不同的页面，如果不应用懒加载技术的话，打包构建应用时，包会很大，第一次加载时会把所有的组件以及相关资源全部都加载了，这会加载过多暂时不需要的资源，导致速度变慢，用户体验降低的问题。
也就是说，使用Vue路由懒加载可以解决一开始加载时不要一次性把资源都加载完，而是在需要时加载相应的资源。

二、 Vue路由懒加载实现

1. 使用require进行路由懒加载

const Foo = resolve => require(['./Foo.vue'], resolve);
const Bar = resolve => require(['./Bar.vue'], resolve);

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
];
1
2
3
4
5
6
7

在上述示例中，我们使用require函数来动态地加载Foo.vue和Bar.vue组件。这样的写法适用于旧版本的Vue或者一些特定的构建工具。

2. 使用ES模块语法import()进行路由懒加载（推荐）

const Foo = () => import('./Foo.vue');
const Bar = () => import('./Bar.vue');

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
];
1
2
3
4
5
6
7

在上面的示例中，我们利用了ES模块语法的import()函数来实现路由懒加载。当用户访问对应的路由时，相关的组件会被按需加载并渲染到页面。

3. 不使用懒加载的方式

如果对于某些路由组件来说，懒加载并不是必要的，我们可以直接在路由配置中引入组件。

import Foo from './Foo.vue';
import Bar from './Bar.vue';

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
];
1
2
3
4
5
6
7

在上述示例中，Foo.vue和Bar.vue组件会在应用程序初始化时一次性加载。这种方式适用于那些较小且不常访问的路由组件。

三、 Vue路由懒加载原理

1. 主要作用是 将路由对应的组件打包成一个个的JS代码块
2. 只有 在这个路由被访问到的时候，才加载对应的组件，否则不加载

四、 总结

通过使用require、ES模块语法import以及不使用懒加载的方式，我们可以根据需求选择合适的路由懒加载技术。懒加载可以优化应用程序的性能，减少初始加载时间，并提供更好的用户体验。同时，对于较小或者不常访问的路由组件，可以考虑不使用懒加载的方式，以简化开发和维护。在Vue应用程序中，我们应根据项目需求选择适当的路由加载方式。