Several ways to implement routing lazy loading in vue

1. Why do you need routing lazy loading

Vue will generate a dist folder after the project is packaged. There is another js/app.js file in the dist folder, which mainly stores the business logic code of the entire project. With the continuous development and iteration of the project, there will be more and more business logic, and the app.js file will become larger and larger. On the line, it will take too long to enter the homepage or the problem of a blank screen.

Using routing lazy loading can divide the code and improve the loading efficiency of the initial page.

Two, the way of routing lazy loading

1. Use ES6's import () - recommended

const component name = () => import('component path')

(The code below does not specify webpackChunkName, and each component is packaged into a js file)

const home = () => import('../view/home')

(The code below, specifying the same webpackChunkName name'testDom', will be combined and packaged into a js file)

const home = () => import(/* webpackChunkName: 'testDom' */ '../view/home')
const login= () => import(/* webpackChunkName: 'testDom' */ '../view/login')

2. Use vue asynchronous component resolve

const component name = resolve => require(['component path'], resolve)

(In this case, a component generates a js file)

const home = resolve => require(['../view/home'],resolve)

3. require.ensure() provided by webpack

In this mode, js can also be packaged separately through the webpackChunkName in the parameter.
const component name = resolve => require.ensure([], () => resolve(require('component path')),'webpackChunkName')

const home = resolve => require.ensure([], () => resolve(require('../view/home')), 'testDom')