實現vue-router 路由懶加載

相比React，Vue實現組件的懶加載仍是比較簡單的，如下是官方文檔的說明

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

export default new VueRouter({
    routes: [
        {
            path: '/',
            name: 'Navigator',
            component: () => import(/* webpackChunkName: "navigator" */ './../components/Navigator')
        },
        {
            path: '/tucao',
            name: 'Tucao',
            component: () => import(/* webpackChunkName: "tucao" */ './../components/Tucao')
        }
    ]
})

以上是按照官方文檔寫的懶加載代碼，可是發現chunk命名並沒生效
，再去仔細看看官方文檔說明

「結合 Vue 的 異步組件和 Webpack 的 代碼分割功能，輕鬆實現路由組件的懶加載」

其實還差一個webpack配置，就是webpack output須要加個chunkFilename

chunkFilename: '[name].js'

這樣就沒問題了