vue--按需加載的3種方式（解決網頁首次加載速度慢的問題）

一、vue的異步組件加載

使用異步組件加載，打包的時候會將每個組件分開打包到不同的js文件中：

  {path: '/index', name: 'index',
    meta:{
      title:'首頁',
      requireAuth:true
    },
    /*這是異步加載組件，當你訪問時 ，才會加載 ,vue-router中，require代替import解決vue項目首頁加載時間過久的問題*/
    component: resolve => {
      clearTimeout(_pageTimer);
　　　　//這里是設置定時器，超過時間，如果沒有被停止，則輸出“網絡加載超時”
      _pageTimer = setTimeout(function () {
        tipsCallback();//作用輸出字符串提示
      },timeout);
      require(['@/page/index/index.vue'], function (component) {
　　　　　//在組件加載完后，如果定時器存在，則清除定時器。
        if(_pageTimer){clearTimeout(_pageTimer);}
        resolve(component)
      })
    }},

 

二、ES新提案：import()——動態加載ES模塊

官方推薦使用這種方式，注意如果你希望在Vue router 的路由組件中使用這種語法的話，你必須使用 Vue Router 2.4.0+ 版本。

        {
          path: '/index',
          component: () => import('@/page/index/index'),
          name: '首頁'
        },

 

三、webpack提供的require.ensure()

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

1、dependencies：依賴   

這是一個字符串數組，通過這個參數，在所有的回調函數的代碼被執行前，我們可以將所有需要用到的模塊進行聲明。

2、callback：回調 

當所有的依賴都加載完成后，webpack會執行這個回調函數。require 對象的一個實現會作為一個參數傳遞給這個回調函數。因此，我們可以進一步 require() 依賴和其它模塊提供下一步的執行。

3、chunkName：chunk名稱

chunkName 是提供給這個特定的 require.ensure() 的 chunk 的名稱。通過提供 require.ensure() 不同執行點相同的名稱，我們可以保證所有的依賴都會一起放進相同的 文件束(bundle)。

{ path: '/index', component: r => require.ensure([], () => r(require('@/pages/index/index')), 'index'), meta: { title: '首頁' } }

這里只是做記錄使用。