front-end performance optimization vue

reference:

https://www.jianshu.com/p/6262772bdc9c

https://blog.csdn.net/qq_40460909/article/details/100038778

https://blog.csdn.net/qq_19666289/article/details/95330025

Full of joy vue development projects nearing completion when the testers found first loads slow, like constipation in the app, the helpless to be optimized, and began looking for various ways!

The following is a summary of some optimization methods out of my own:

1. Route lazy loading

 

 
Routing lazy loading

This method will app.js originally packaged in a separate file into a plurality of files js packing, this will reduce the size of a single file, but does not reduce the size of the entire folder js. Load demand can be done this way, just load the js file a single page.

2. Components asynchronous loading

 

 
Assembly loaded asynchronously

Loading home, they can give home child component settings v-if = "false", when the page initialization to give the sub-assembly is set to true, this method makes use of an inert v-if's, setTimeout will subassembly All components show after initialization is complete and initialize its subcomponents.

Note: In the actual development also encountered another case can also use this solution to obtain a token app js at the entrance, but it was found in either created or mounted in are sometimes able to get the specific page token, sometimes can not, because of the execution order is to be set to zero by this time setTimeout method used in the method of the request token to the bottom of the queue, so we can guarantee the request process has the token.

3. The use of asynchronous components, demand loading

newVue ({

// ...

  components: {

        'my-component':()=>import('./my-async-component')

  }

})

es6 wording, `import` function returns a` Promise` object. This realization of the demand loading of components, there is a need of the time will load this component, it is also a way to fold loading speed optimization.

The following two pictures you can clearly understand the different "./xxx.vue" and import () method, with the import function and the benefits arising from import xxx from.

 

 
import xxx from "./xxx.vue"
 
 import () method

The above two methods, after packing the resulting file, import function method is very clear a few more js, which is separated from the original app.js in 0.js, 1.js, 2.js. The first figure, at run time will app.js entire finished loading, while the second chart will load 0.js + app.js, although more than one file, but in fact, the latter a whole load of file size much smaller than the original. This is the load demand, it will be loaded when needed 1.js, and once after loading will be cached locally, the next load will take cached files.

Further, since the import function returns a promise is the object, it is possible to use the then promise itself () and the catch () methods to monitor the loading assembly, such as:

 

 
 

4. Picture amount of time can be batch loaded

vue-lazyload plug, lazy loading images

5. External introduce some plug-ins, not to introduce in the vue

Included, I helpful to moment.js this plug-in project times, after the introduction of packaged inside vue project size than the introduction of packaged items with src way around the outside of a large 300k.

First, download moment.min.js good package, and then add that code under the arrow is pointing in webpack.base.conf.js vue project

 
 

After adding code to FIG moment.js is not to be packaged into the js.

The final step, you just downloaded moment.min.js package manually into the packaged index.html file.

Note: This method is really useful, if the fear of the entire project file is too large, it can also be introduced by the method of cdn: https://cdn.bootcss.com/moment.js/2.22.1/moment.min.js

It is important: after the colon uppercase name is the name of the project and our own definition to be used in names such as: 'vue': 'Vue', the latter must be consistent and Vue project.



Author: zx a fat
link: https: //www.jianshu.com/p/6262772bdc9c
Source: Jane books
are copyrighted by the author. Commercial reprint please contact the author authorized, non-commercial reprint please indicate the source.

Guess you like

Origin www.cnblogs.com/liuqiyun/p/12509860.html