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

Source: Internet
Author: User

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]

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.