vue 路由懒加载，组件异步加载

用于缓解首屏加载缓慢

1. vue异步组件

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

{ 
    path: '/home',
    name: 'Home', 
    component: resolve => require(['@/components/home'],resolve) 
},

2. webpack 的 require.ensure() 

vue-router配置路由，使用webpack的require.ensure，也可实现

require.ensure（）接受三个参数：

语法: require.ensure(dependencies: String[], callback: function([require]), [chunkName: String]) 

• • dependencies: 依赖的模块数组
  • callback: 回调函数，该函数调用时会传一个require参数
  • chunkName: 模块名，用于构建时生成文件时命名使用

{ 
    path: '/home',
    name: 'home',
    component: r => require.ensure([], () => r(require('@/components/home')), 'chunk') 
    // r就是resolve
    // 'chunk' 表示包名，相同的 chunk 名 会被打包到一起
},

甚至，可以在加载过程中执行 loading 图

{
   path: '/hello',
   name: 'Hello',
   component (r){ 
     console.log('切换')
     // 开始加载 loading
     require.ensure([], (require) => { 
        r(require('@/components/HelloWorld')) 
     }) 
     console.log('切换完成')
     // 关闭 loading
   },
},

 

-- end --

转载于:https://www.cnblogs.com/_error/p/11095702.html