1. 什么是路由懶加載？

    也叫延遲加載，即在需要的時候進行加載，隨用隨載。

2. 官方解釋：

	1：當打包構建應用時，JavaScript 包會變得非常大，影響頁面加載。
	2：如果我們能把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件，這樣就更加高效了。

3. 官方在說什么呢？為什么需要懶加載？

	1：首先，我們知道路由中通常會定義很多不同的頁面。
	2：這個頁面這項目build打包后，一般情況下，會放在一個單獨的js文件中
	3：但是，如果很多的頁面都放在同一個js文件中，必然會造成這個頁面非常大
	4：如果我們一次性的從服務器中請求下來這個頁面，可能會花費一定時間，用戶體驗不好
	5：如何避免這種情況發生呢？使用路由懶加載就可以了

4. 繼續解釋原由？

    1：像vue這種單頁面應用，如果沒有應用懶加載，運用webpack打包后的文件將會異常的大。
    2：造成進入首頁時，需要加載的內容過多，時間過長，會出啊先長時間的白屏，即使做了loading也是不利于用戶體驗。
    3：而運用懶加載則可以將頁面進行劃分，需要的時候加載頁面，可以有效的分擔首頁所承擔的加載壓力，減少首頁加載用時

也就是說：進入頁面不用也不需要一次性加載過多資源造成加載時間過程！

5. 路由懶加載做了什么事情？

	1：主要作用是將路由對應的組件打包成一個個的js代碼塊
	2：只有在這個路由被訪問到的時候，才加載對應的組件，否則不加載！

即：只有在這個路由被訪問到的時候，才加載對應的組件，否則不加載！

1:.如何實現路由懶加載？？

 vue項目實現路由按需加載（路由懶加載）的三種方式：
 	1：Vue異步組件
 	2：ES6標準語法import（）---------推薦使用?。。。?！
 	3：webpack的require，ensure()

2.Vue異步加載技術

 	1：vue-router配置路由，使用vue的異步組件技術，可以實現懶加載，此時一個組件會生成一個js文件。
 	2：component: resolve => require(['放入需要加載的路由地址'], resolve)

  { 
   
      path: '/problem',
      name: 'problem',
      component: resolve => require(['../pages/home/problemList'], resolve)
    }

3.ES6推薦方式imprort ()—-推薦使用

 	1：直接將組件引入的方式，import是ES6的一個語法標準，如果需要瀏覽器兼容，需要轉化成es5的語法。
 	2：推薦使用這種方式，但是注意wepack的版本>2.4
 	3：vue官方文檔中使用的也是import實現路由懶加載
 	4：上面聲明導入，下面直接使用

import Vue from 'vue';
import Router from 'vue-router';
// 官網可知：下面沒有指定webpackChunkName，每個組件打包成一個js文件。
const Foo = () => import('../components/Foo')
const Aoo = () => import('../components/Aoo')
// 下面2行代碼，指定了相同的webpackChunkName，會合并打包成一個js文件。
// const Foo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Foo')
// const Aoo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Aoo')
export default new Router({ 
   
    routes: [
        { 
   
            path: '/Foo',
            name: 'Foo',
            component: Foo
        },
        { 
   
            path: '/Aoo',
            name: 'Aoo',
            component: Aoo
        }
    ]
})

4.webpack提供的require.ensure()實現懶加載：

 	1：vue-router配置路由，使用webpack的require.ensure技術，也可以實現按需加載。
 	2：這種情況下，多個路由指定相同的chunkName，會合并打包成一個js文件。
 	3：require.ensure可實現按需加載資源，包括js,css等。他會給里面require的文件單獨打包，不會和主文件打包在一起。
 	4：第一個參數是數組，表明第二個參數里需要依賴的模塊，這些會提前加載。
	5：第二個是回調函數,在這個回調函數里面require的文件會被單獨打包成一個chunk,不會和主文件打包在一起，這樣就生成了兩個chunk,第一次加載時只加載主文件。
	6：第三個參數是錯誤回調。
	7：第四個參數是單獨打包的chunk的文件名

————————————————
此處代碼參考原文鏈接：https://blog.csdn.net/qq_41998083/article/details/109726402

import Vue from 'vue';
import Router from 'vue-router';
const HelloWorld=resolve=>{ 
   
		require.ensure(['@/components/HelloWorld'],()=>{ 
   
			resolve(require('@/components/HelloWorld'))
		})
	}
Vue.use('Router')
export default new Router({ 
   
	routes:[{ 
   
	{ 
   path:'./',
	name:'HelloWorld',
	component:HelloWorld
	}
	}]
})

4.import和require的比較（了解）

1：import 是解構過程并且是編譯時執行
2：require 是賦值過程并且是運行時才執行，也就是異步加載
3：require的性能相對于import稍低，因為require是在運行時才引入模塊并且還賦值給某個變量

至此：關于VueRouter懶加載的基本知識以及使用方式已經介紹完畢，邏輯道理很簡單， 關鍵在實踐，感謝觀看！

總結

以上是生活随笔為你收集整理的vue-router路由懒加载以及三种实现方式「建议收藏」(Router)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。