vue 路由懒加载

拥有回忆 提交于 2020-03-22 20:59:08

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

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!