vue路由頁面加載的幾種方法~

懶加載

（1）定義：懶加載也叫延遲加載，即在須要的時候進行加載，隨用隨載。

（2）爲何須要懶加載：

　　在單頁應用中，若是沒有應用懶加載，運用webpack打包後的文件將會異常的大，形成進入首頁時，須要加載的內容過多，延時過長，不利於用戶體驗，

　　而運用懶加載則能夠將頁面進行劃分，須要的時候加載頁面，能夠有效的分擔首頁所承擔的加載壓力，減小首頁加載用時

（3）異步加載的三種表示方法：

1.  resolve => require([URL], resolve),支持性好

2.  resolve => require.ensure([ ], ()=>{resolve(require())}) ,是 webpack 特有的，已經被 import() 取代。

3.  () => import(URL), webpack2官網推薦使用,屬於es7範疇,須要配合babel的syntax-dynamic-import插件使用。

1.  resolve => require([URL], resolve)

　　vue-router配置路由，使用vue的異步組件技術，能夠實現按需加載。

　　可是，這種狀況下 ，一個組件生成一個js文件。

　　

 

2.   resolve => require.ensure([ ], ()=>{resolve(require())})

　　vue-router配置路由，使用webpack的require.ensure技術，也能夠實現按需加載。

　　這種狀況下，多個路由指定相同的chunkName，會合並打包成一個js文件。

　　

 

3.  () => import(URL)　　

　　推薦使用這種方式(須要webpack > 2.4).

　　webpack官方文檔：webpack中使用import()

　　

　　請無視js檢查紅色波浪線，這種寫法是徹底沒問題的，親測。- -！