[Fan Chen] --- vue route lazy loading --- [vue]

I. Lazy Loading

It is also called delayed loading or on-demand loading, that is, loading as needed,

 

Ii. Why should I use lazy loading?

For single-page applications such as Vue, if there is no application, the files packaged with webpack will be abnormally large, resulting in too much content to be loaded when you enter the home page, which takes a long time, A long white screen is displayed. Even if loading is performed, It is not conducive to the user experience. Lazy loading can be used to divide the page and load the page as needed, it can effectively share the loading pressure on the home page and reduce the loading time of the home page.

Simply put, it takes too long to enter the home page without loading too many resources at a time.

 

3. Route configuration items loaded without laziness

Iv. vue asynchronous components implement routing lazy loading

 

The asynchronous components of Vue can be used to load routes lazily.

 

{

Path: '/home ',

Name: 'home ',

Component: Resolve => require (['../components/home'], resolve)

}

 

V. Import proposed by ES (this method is recommended)

 

Const Homefn= () =>Import('../Components/Home/home')

Const Moviefn= () =>Import('../Components/Movie/movie')

 

 

 

Export DefaultNewRouter({

Routes:[

{

　　　　　　Path:'/Home',

Name:'Home',

　　　　　　Component:Homefn

},

{

　　　　　　Path:'/Movie',

　　　　　　Name:'Movie',

Component:Moviefn

}

]})

 

 

6. chunkfilename

 

Chunkfilename: chunkname is the file name configuration that is not listed in the entry, but needs to be packaged in some scenarios. For example, when an on-demand (asynchronous) module is loaded, such files are not listed in the entry. The module is asynchronously loaded using commonjs.

Chunkfilename: utils. assetspath ('js/[ID]. [chunkhash]. js ')

[Fan Chen] --- vue route lazy loading --- [vue]