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

1、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) }) }},

 

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

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

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

 

3、webpack提供的require.ensure()

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

一、dependencies：依賴   

這是一個字符串數組，經過這個參數，在全部的回調函數的代碼被執行前，咱們能夠將全部須要用到的模塊進行聲明。

二、callback：回調 

當全部的依賴都加載完成後，webpack會執行這個回調函數。require 對象的一個實現會做爲一個參數傳遞給這個回調函數。所以，咱們能夠進一步 require() 依賴和其它模塊提供下一步的執行。

三、chunkName：chunk名稱

chunkName 是提供給這個特定的 require.ensure() 的 chunk 的名稱。經過提供 require.ensure() 不一樣執行點相同的名稱，咱們能夠保證全部的依賴都會一塊兒放進相同的 文件束(bundle)。

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

這裏只是作記錄使用。