1. vue asynchronous component technology

• vue-router configures routing, using vue's Asynchronous component The technology can realize on-demand loading.

However, in this case, the next component generates a js file.
Examples are as follows:

        {
            path: '/promisedemo',
            name: 'PromiseDemo',
            component: resolve => require(['../components/PromiseDemo'], resolve)
        }

2. import() of ES proposal

• This approach is recommended (webpack > 2.4 is required)
• Official documentation for webpack: Using import() in webpack

vue official documents: Routing lazy loading (using import())

• vue-router configures routing, code as follows:

// The following two lines of code do not specify webpackChunkName, and each component is packaged into a js file.
const ImportFuncDemo1 = () => import('../components/ImportFuncDemo1')
const ImportFuncDemo2 = () => import('../components/ImportFuncDemo2')
// The following two lines of code specify the same webpackChunkName, which will be merged and packaged into a js file.
// const ImportFuncDemo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo')
// const ImportFuncDemo2 = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo2')
export default new Router({
    routes: [
        {
            path: '/importfuncdemo1',
            name: 'ImportFuncDemo1',
            component: ImportFuncDemo1
        },
        {
            path: '/importfuncdemo2',
            name: 'ImportFuncDemo2',
            component: ImportFuncDemo2
        }
    ]
})

3. require.ensure() provided by webpack

• vue-router configures routing, using webpack's require.ensure Technology can also achieve on-demand loading.

In this case, multiple routes specify the same chunkName, which is combined and packaged into a js file.
Examples are as follows:

        {
            path: '/promisedemo',
            name: 'PromiseDemo',
            component: resolve => require.ensure([], () => resolve(require('../components/PromiseDemo')), 'demo')
        },
        {
            path: '/hello',
            name: 'Hello',
            // component: Hello
            component: resolve => require.ensure([], () => resolve(require('../components/Hello')), 'demo')
        }

• Detailed code in github warehouse: https://github.com/cag2050/vu...

Project Routing Profile: https://github.com/cag2050/vu...

Change from: https://segmentfault.com/a/1190000011519350