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