Vue load on demand to enhance user experience

Vue official document Asynchronous component:

In large applications, we may need to split the application into several small modules and download them from the server on demand. To make things easier, Vue.js allows you to define a component as a factory function that parses the definition of the component dynamically. Vue.js triggers the factory function only when the component needs to render, and caches the results for later re-rendering.

The original picture and text is from h tt p / / www .cnb logs. Com/ Kumm y/p/525 47 54 .html

Vue loads related articles on demand:

1: htt p: / / c n. V u e j s. O rg / g u id e / co m p o ne n t s .ht ml# Asynchronous component

2: htt p: / / w eb p a ck. Gi t h ub. Io / d oc s / c o de-splitting.html

Today, we will give some practical project experience solutions for on-demand loading (that is, no request without loading):

Vue demand loading solution: require ([asynchronously loaded components], resolve)

Angular demand loading solution: $ocLazyLoad

Vue demand loading solution: require ([asynchronously loaded components], resolve)

It takes 2 steps to complete on-demand loading

The first step is to make configuration changes for webpack.js, as shown in the figure:

Step 2: make changes for router routing, mainly for component, as shown in the figure.

Step 3: execute the npm run build packaging command, and you can see that many small files of chunk are generated in the chunks folder, which is the vue component page, as shown in the figure:

Angular loads related articles on demand:

1: http://www.alloyteam.com/2016/03/es6-front-end-developers-will-have-to-know-the-top-ten-properties/

2: http://www.mamicode.com/info-detail-407754.html

Angular demand loading: $ocLazyLoad

It takes three steps to implement the on-demand loading solution.

Step 1: bower install oclazyload

Step 2: $ocLazyLoad encapsulation:

Step 3: ui-router routing configuration:

This scheme does this by loading files for template and controller on demand. You can see the effect by visiting the page at this time.

Gif demonstration of the effect: