為什么需要路由懶加載？

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

懶加載寫法

寫法一：

主要是使用了resolve的異步機制，用require代替了import,實現(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)}]
}) 

寫法二：

vue-router在官網(wǎng)提供了一種方法，可以理解也是為通過Promise的resolve機制。因為Promise函數(shù)返回的Promise為resolve組件本身，而我們又可以使用import來導入組件

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')}]
}) 

方法三：

通過參數(shù)中的webpackChunkName將js分開打包

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')}]
})