路由的懶載入

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

結合Vue的非同步元件和Webpack的程式碼分割功能，輕鬆實現路由元件的懶載入。

如下的方法可以定義一個能夠被 Webpack 自動程式碼分割的非同步元件

const Foo = () => import('./Foo.vue')

如果您使用的是 Babel，你將需要新增syntax-dynamic-import外掛，才能使 Babel 可以正確地解析語法。

在路由配置中什麼都不需要改變，只需要像往常一樣使用Foo：

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

或者省略定義Foo的過程：

const router = new VueRouter({
  routes: [
    { path: '/foo', component: () => import('./Foo.vue') }
  ]
})

優化

當路由增多時，routes中每個cmponent都需要按照如上的樣式實現懶載入，並且在開發環境中使用懶載入，會導致程式碼更改的熱跟新速度變慢，所以需要區分環境來使用路由的懶載入功能

在路由資料夾下新建兩個檔案：

_import_production.js：

module.exports = file => () => import('@/views/' + file + '.vue')

_import_development.js (這種寫法vue-loader版本至少v13.0.0以上)：

module.exports = file => require('@/views/' + file + '.vue').default

在設定路由的router/index.js檔案中：

const _import = require('./_import_' + process.env.NODE_ENV)
 
export default new Router({
  routes: [{ path: '/login', name: '登陸', component: _import('login/index') }]
})
 

參考

• Vue Router - 路由懶載入
• 伯樂線上 - Vue使用中的小技巧