vue routing lazy loading, asynchronous loading assembly

The first screen is used to relieve slow to load

1. vue asynchronous component

 vue-router configured to route the asynchronous component using vue-demand loading

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

2. webpack 的 require.ensure() 

vue-router configured to route the require.ensure webpack use, can be achieved

require.ensure () takes three parameters:

grammar: require.ensure(dependencies: String[], callback: function([require]), [chunkName: String]) 

• dependencies: dependent module array
• callback: callback function will pass a parameter of the function calls require
• Generates a file name used when the module name, used in the construction: chunkName

{ 
    path: '/home',
    name: 'home',
    Component: R & lt => require.ensure ([], () => R & lt (the require ( '@ / Components / Home')), 'the chunk' ) 
     // R & lt is Resolve 
    // 'the chunk' represents the package name, the same chunk name will be packaged together 
},

Even, you can perform the loading diagram during the loading process

{
   path: '/hello',
   name: 'Hello',
   component (r){ 
     the console.log ( 'handover' )
      // begin loading loading 
     require.ensure ([], (the require) => {
        r(require('@/components/HelloWorld')) 
     }) 
     the console.log ( 'Handover Complete' )
      // off loading 
   },
},

 

-- end --