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
   },
},

 

3. ES6 import 方法

此处的 import 放在箭头函数中使用，只有在调用的时候才会执行。

" webpackChunkName " 指定包名，若相同，则打包为一个 js 文件，then 方法中传入的 m 表示单文件模块

{ 
    path: '/home',
    name: 'Home', 
    component: ()=> import(/* webpackChunkName: "home" */ '@/components/page/home/index').then(m => m.default)
},

 

 

-- end --