vue 路由懒加载

Posted ---godzilla---

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 路由懒加载相关的知识,希望对你有一定的参考价值。

当打包构建应用时,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 

 

以上是关于vue 路由懒加载的主要内容,如果未能解决你的问题,请参考以下文章

VUE的路由懒加载及组件懒加载

VUE的路由懒加载及组件懒加载

vue路由懒加载及组件懒加载

vue:路由懒加载Loading chunk 1 failed.

vue路由懒加载,vue首屏加载慢和使用懒加载prefetch问题,新增组件懒加载

路由懒加载及实现方式(vue-router)