处理 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))
        }
    }
}

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