vue 路由懒加载

Posted 2022-11-10 ---godzilla---

当打包构建应用时，javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

有如下三种方法:

1. vue异步组件
2. es提案的import()
3. webpack的require,ensure()

1.vue异步组件 

将异步组件和 webpack 的 code-splitting 功能一起配合使用

vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 . 

但是,这种情况下一个组件生成一个js文件

 1 /* vue异步组件技术 */
 2 
 3   path: ‘/home‘,
 4   name: ‘home‘,
 5   component: resolve => require([‘@/components/home‘],resolve)
 6 ,
 7   path: ‘/index‘,
 8   name: ‘Index‘,
 9   component: resolve => require([‘@/components/index‘],resolve)
10 ,
11   path: ‘/about‘,
12   name: ‘about‘,
13   component: resolve => require([‘@/components/about‘],resolve)
14 

2.es提案的import()

1    
2       path: ‘/home‘, 
3       name: ‘Home‘,
4       component: () => import(‘@/views/home‘)
5     , 
6       path: ‘/about‘, 
7       name: ‘About‘,
8       component: () => import(‘@/views/about‘)
9     

把组件按组分块

有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 命名 chunk，一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)

Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。

1 const Foo = () => import(/* webpackChunkName: "group-foo" */ ‘./Foo.vue‘)
2 const Bar = () => import(/* webpackChunkName: "group-foo" */ ‘./Bar.vue‘)
3 const Baz = () => import(/* webpackChunkName: "group-foo" */ ‘./Baz.vue‘)

注意：chunk name一定要加引号(单引号双引号都可以)否则webpack不能识别chunk name,会默认按[id]显示，打出来的包的名字会是 0.js,1.js……

3.webpack提供的require.ensure()

vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。 
这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件

 

 1 /* 组件懒加载方案三: webpack提供的require.ensure() */
 2 
 3   path: ‘/home‘,
 4   name: ‘home‘,
 5   component: r => require.ensure([], () => r(require(‘@/components/home‘)), ‘demo‘)
 6 , 
 7   path: ‘/index‘,
 8   name: ‘Index‘,
 9   component: r => require.ensure([], () => r(require(‘@/components/index‘)), ‘demo‘)
10 , 
11   path: ‘/about‘,
12   name: ‘about‘,
13   component: r => require.ensure([], () => r(require(‘@/components/about‘)), ‘demo-01‘)
14