vue——列表頁進詳情頁，第一次很慢，第二次就很快問題及解決方法

參考：https://segmentfault.com/q/1010000010829474

 

問題：列表頁進詳情頁，第一次很慢，第二次就很快。

原因：我原本是使用組件懶加載，每次第一次切換路由的時候，都要去加載相應的組件的js文件，需要等文件加載完之后，路由才能切換過去。后面切換的話js都下載過了，所以切換就不卡了。

解決：將組件懶加載改為直接加載。

 

原router.js:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [{
      path: '/',
      name: 'Home',
      meta: {
        index: 0,
        keepAlive: true,
        title: '首頁'
      },
      component: resolve => require(['../../../modules/Home'], resolve)
    },
    {
      path: '/detail',
      name: 'Detail',
      meta: {
        index: 1,
        keepAlive: false,
        title: '詳情頁'
      },
      component: resolve => require(['../../../modules/Detail'], resolve)  //組件懶加載
    }]
})

 

改進后:

import Vue from 'vue'
import Router from 'vue-router'
import Detail from '@/modules/Detail'  // <== 修改

Vue.use(Router)

export default new Router({
  routes: [{
      path: '/',
      name: 'Home',
      meta: {
        index: 0,
        keepAlive: true,
        title: '首頁'
      },
      component: resolve => require(['../../../modules/Home'], resolve)
    },
    {
      path: '/detail',
      name: 'Detail',
      meta: {
        index: 1,
        keepAlive: false,
        title: '詳情頁'
      },
      component: Detail  // <== 修改
    }]
})

注意：直接注冊組件，會在首頁加載時就加載其內容包括其內部引入的子組件，打包到index.css文件中。