webpack的 require.ensure 使用

// 批量导入.md文件

import GROUPS from '/';

GROUPS.map(item => { return item.component = LOAD_DOCS_MAP["zh-CN"]('zh-CN', item.path) })

const LOAD_DOCS_MAP = {
    'zh-CN': (lang, path) => {
        return r => require.ensure([], () =>
            r(require(`./docs/zh-CN${path}.md`)),
            'zh-CN');
    }
};

const introduction = [{
        path: '/',
        redirect: '/installation'
    },
    {
        path: '/changelog',
        name: 'changelog',
        component: changelog
    },
    {
        path: '/installation',
        name: 'installation',
        component: installation
    },
    {
        path: '/quickstart',
        name: 'quickstart',
        component: quickstart
    },
    // {
    //   path: '/button',
    //   name: 'button',
    //   component: LOAD_DOCS_MAP["zh-CN"]('zh-CN', '/button')
    // },
    // {
    //   path: '/input',
    //   name: 'input',
    //   component: LOAD_DOCS_MAP["zh-CN"]('zh-CN', '/input')
    // }
]
const routes = GROUPS.concat(introduction);

export default new VueRouter({
    mode: 'hash',
    base: process.env.BASE_URL,
    routes,
});

好处就是，不用在 introduction  里写出所有的对象了！！

其实原理就是：

const makeIndex = r => require.ensure([], () => r(require('@views/make/index')), 'make')

只不过现在我们都用 es6的 import() 方式 异步加载路由：

const notFound = () => import('@views/common/404')