What is on-demand loading in vue

In vue, on-demand loading is also called delayed loading or lazy loading, which means loading resources as needed; there are three ways to implement on-demand loading in vue projects: vue asynchronous component technology, and the import() proposed by es , "require.ensure()" provided by webpack.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

On-demand loading, also known as delayed loading or lazy loading, means to load resources as needed and will only be loaded when they are used.

Why it is necessary to load on demand

With the development of the Internet, a web page needs to carry more and more functions. For websites that use single-page applications as the front-end architecture, they will face the problem of a large amount of code that needs to be loaded on a web page, because many functions are concentrated in one HTML. This will lead to slow loading of web pages, stuck interactions, and a very poor user experience.

The root cause of this problem is that the code corresponding to all functions is loaded at one time, but in fact, users can only use part of the functions at each stage. Therefore, the way to solve the above problem is to load only the code corresponding to the function that the user currently needs, which is the so-called on-demand loading.

How the vue project implements on-demand loading

3 ways for the vue project to implement on-demand loading: vue asynchronous component technology, es proposal import(), webpack Provided require.ensure()

vue asynchronous component technology

vue-router configures routing and uses vue's asynchronous component technology to achieve Load on demand. In this way, the next component generates a js file

Use case:

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

es proposal’s import() (recommended)

webpack official documentation: using import() in webpack

vue official documentation: routing lazy loading (using import())

Use case:

// 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。
const ImportFuncDemo1 = () => import('../components/ImportFuncDemo1')
const ImportFuncDemo2 = () => import('../components/ImportFuncDemo2')

// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。
// 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
        }
    ]
})

require.ensure() provided by webpack

vue-routerConfigure routing and use webpack’s require.ensure technology. You can also Implement on-demand loading.

In this case, multiple routes specifying the same chunkName will be merged and packaged into one js file.

For example:

{
    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')
}

[Related recommendations: vue.js tutorial]

The above is the detailed content of What is on-demand loading in vue. For more information, please follow other related articles on the PHP Chinese website!