3 ways to implement route loading on demand (lazy loading of routes) in vue

Why do we need lazy loading?

Single-page applications like vue, if there is no application lazy loading, the files packaged with webpack will be abnormally large, resulting in the content that needs to be loaded when entering the homepage Too much and too long will result in a long white screen. Even if loading is done, it is not conducive to the user experience. However, using lazy loading can divide the page and load the page when needed, which can effectively share the load of the homepage. Bear the loading pressure and reduce the loading time of the home page [Related recommendations: vue.js video tutorial]

• vue asynchronous component

• es proposal’s import()

• webpack’s require, ensure()

1. vue asynchronous component technology== == Asynchronous loading

vue-router configures routing and uses vue's asynchronous component technology to achieve on-demand loading.
However, in this case, a component generates a js file

/* vue asynchronous component technology*/

{ path: '/home', name: 'home', component: resolve => require([' @/components/home'],resolve) },

{ path: '/index', name: 'Index', component: resolve => require(['@/components/index '],resolve) },

{ path: '/about', name: 'about', component: resolve => require(['@/components/about'],resolve) }

Non-lazy loading:

Lazy loading

2. Component lazy loading solution 2. Route lazy loading (using import)

const 组件名=() => import('组件路径');
// 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。
/* const Home = () => import('@/components/home')
const Index = () => import('@/components/index')
const About = () => import('@/components/about') */
// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。
把组件按组分块
const Home = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')
const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')
const About = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/about')

{ path: '/about', component: About }, { path: '/index', component: Index }, { path: '/home', component: Home }

3. require.ensure() provided by webpack

vue-router configures routing and uses webpack’s require. ensure technology can also implement on-demand loading.
In this case, multiple routes specifying the same chunkName will be merged and packaged into one js file.

/* 组件懒加载方案三: webpack提供的require.ensure() */
{ path: '/home', name: 'home', component: r => require.ensure([], () => r(require('@/components/home')), 'demo') },
{ path: '/index', name: 'Index', component: r => require.ensure([], () => r(require('@/components/index')), 'demo') },
{ path: '/about', name: 'about', component: r => require.ensure([], () => r(require('@/components/about')), 'demo-01') }

// r就是resolve
const list = r => require.ensure([], () => r(require('../components/list/list')), 'list');
// 路由也是正常的写法  这种是官方推荐的写的 按模块划分懒加载 
const router = new Router({
    routes: [
        {
           path: '/list/blog',
           component: list,
           name: 'blog'
        }
    ]
})

The above is the detailed content of 3 ways to implement route loading on demand (lazy loading of routes) in vue. For more information, please follow other related articles on the PHP Chinese website!