處理 Vue-Router + Webpack 動態加載的一些小問題

所述基於 Vue-Router 0.7 的 Vue 1.0 項目.

Vue-Router 與 Webpack 的 Code-Splitting 功能結合起來能夠實現組件的動態加載：

router.map({
  '/account-info': {
    component: function (resolve) {
      require(['./views/AccountInfo/index.vue'], resolve)
    }
  },

  '/about': {
      component (resolve) {
        require(['./views/About/index.vue'], resolve)          
      }
  },

  ...
})

只有當訪問到兩個路由時組件纔會被加載進來，節約資源。

不過當項目組件數量偏多的時候手工註冊總歸不是好辦法，不如寫成配置動態處理：

// 組件配置信息.
const viewConfig = {
    "account-info": {
        name: "account-info",
        link: "/account-info",
        view: "views/AccountInfo/index.vue"
    },

    "about": {
        name: "about",
        link: "/about",
        view: "views/About/index.vue"
    },

    ...
}

// 路由配置對象, 將交給 Vue-Router 處理.
const routeConfig = {}

viewConfig.forEach(config => {
    routeConfig[config.link] = createRouteConfig(config.name, config.view)
})

routerInstance.map(routeConfig)

/**
 *  建立路由配置對象.
 *
 *  @param { string } name 具名路由名稱.
 *  @param { string } view 組件文件所在路徑.
 *  @return { object }  
 */
function createRouteConfig (name, view) {
    return {
        name,
        component (resolve) {
            require(['./' + view], resolve)
        }
    }
}

完美的出事了！Σ(ﾟдﾟ;)

只生成了一個超大的 JS 分片？！

只生成一個超大的 JS 分片，這不是咱們要的嘛！

這時要請出 Webpack 的 bundle-loader，Webpack 的代碼分片功能會將全部動態切分的模塊打包到一塊兒保證執行正確，而 bundle-loader 會將每個動態切分的模塊打包爲獨立文件.

所以改一下配置：

function createRouteConfig (name, view) {
    return {
        name,
        component (resolve) {
            // require(['./' + view], resolve)
            const handler = require('bundle!./' + view)
            handler(module => resolve(module))
        }
    }
}

完美地第二次出事！(ﾟДﾟ≡ﾟдﾟ)!?

build 時出現 「Module not found: Error: a dependency to an entry point is not allowed」 報錯？！

明明 dev 的時候是正確的，build 時就錯了？

通過一番嘗試，發現手工指定 babel-loader 能夠解決問題，那麼：

function createRouteConfig (name, view) {
    return {
        name,
        component (resolve) {
            // require(['./' + view], resolve)
            // const handler = require('bundle!./' + view)
            const handler = require('bundle!babel!./' + view)
            handler(module => resolve(module))
        }
    }
}

蛤蛤蛤，正常工做了！

但好像生成的分片文件數量卻不得了？！

沒多大的項目，居然生成了快 100 個分片？ヽ(`Д´)ﾉ

出現這麼多問題都是由於動態配置，所以是否是 Webpack 在分析詞法的時候捉雞了？

並且好像 handler 並無過 vue-loader？（應該不會吧）那麼就決定試試將 '.vue' 擴展名寫死在代碼中：

// 組件配置信息.
const viewConfig = {
    "account-info": {
        name: "account-info",
        link: "/account-info",
        // view: "views/AccountInfo/index.vue"
        view: "views/AccountInfo/index"
    },

    "about": {
        name: "about",
        link: "/about",
        // view: "views/About/index.vue"
        view: "views/About/index"
    },

    ...
}

// 路由配置對象, 將交給 Vue-Router 處理.
const routeConfig = {}

viewConfig.forEach(config => {
    routeConfig[config.link] = createRouteConfig(config.name, config.view)
})

routerInstance.map(routeConfig)

/**
 *  建立路由配置對象.
 *
 *  @param { string } name 具名路由名稱.
 *  @param { string } view 組件文件所在路徑.
 *  @return { object }  
 */
function createRouteConfig (name, view) {
    return {
        name,
        component (resolve) {
            // require(['./' + view], resolve)
            // const handler = require('bundle!./' + view)
            // const handler = require('bundle!babel!./' + view)
            const handler = require('bundle!babel!./' + view + '.vue')
            handler(module => resolve(module))
        }
    }
}

蛤蛤蛤，居然真的正常了！(=・ω・=)