為什么需要路由懶加載？

當(dāng)打包構(gòu)建應(yīng)用時(shí)，JavaScript 包會(huì)變得非常大，影響頁(yè)面加載。如果我們能把不同路由對(duì)應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問(wèn)的時(shí)候才加載對(duì)應(yīng)組件，這樣就會(huì)更加高效。

懶加載寫(xiě)法

寫(xiě)法一：

主要是使用了resolve的異步機(jī)制，用require代替了import,實(shí)現(xiàn)按需加載

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

寫(xiě)法二：

vue-router在官網(wǎng)提供了一種方法，可以理解也是為通過(guò)Promise的resolve機(jī)制。因?yàn)?code>Promise函數(shù)返回的Promise為resolve組件本身，而我們又可以使用import來(lái)導(dǎo)入組件

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

方法三：

通過(guò)參數(shù)中的webpackChunkName將js分開(kāi)打包

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