Vue project first screen loading time optimization actual combat

A problem with a single page application is that there is too much to load, and the loading time is too long. Especially on the mobile, the first screen loading optimization of single page applications is more refined. Below I will write some optimizations I have made in the project, I hope everyone can discuss each other and make progress together.

My project Vue-CLI3 is built, the Vue + Vue-Router + Vuex, the UI framework selection Element-UI, the Ajax scheme uses AXIOS, and the server uses Nginx. These technologies used are now useful, see this article, I estimate that you and I use the technology should be almost.

First steps: WebPack-Bundle-Analyzer Analysis

Home Let’s take a look at no optimized packaging analysis, Vue-CLI3 project directly

Vue-cli-service build –Report will generate a Report.html, open this HTML, you can see, not the Vue-CLI3 project requires yourself to install this plugin, refer to the link, click.

vue项目首屏加载时间优化实战 As shown in the figure above, the vendor is relatively large, there is Element, Moment, Echart, and jQuery, and then have some Vue-QRIOSLY components, Next, let’s take a step by step to make Vendor becomes smaller

Preliminary optimization

1. Carefully consider whether the component needs to introduce

In our main.js, I found that there are many components to be introduced globally, some of which are only 1, 2 pages, and these components do not need to be introduced

Import ImageComponent from ‘Common / Imagecomponent’Import in?
 IMPORT IMAGENTOMPONENT'IMPORT INfiniteLoading from 'COMMON / infiniteLoading'import SearchDialog from' COMMON / SearchDialog'import BasicTable from 'COMMON / BasicTable'import VueQriously from' vue-qriously'Vue.use (ImageComponent) Vue.use (InfiniteLoading) // may be removed Vue.use (SearchDialog) // can remove Vue.use (vueqriously) // can remove   
The above code is our main.js The code, where imageComponent is used to handle the picture, there are many pages that are used, and other components are used to use fewer pages, we remove them in main.js, move to the specific page.

2. Manual introduction of Echarts module

By default, Echarts is introduced into all “ `import * as echarts from ‘echarts’` `we only need to part Components, simply introduce the part they need. Reference address, click

Import Vueecharts from ‘Vue-Echarts / Components / Echarts.Vue’Import’ Echarts / Lib / Chart / Line’Import ‘Echarts / LIB / Chart / bar’import ‘echarts / lib / chart / pie’import’ echarts / lib / component / title ‘Import ‘echarts / lib / component / tooltip’Import’ Echarts / lib / component / legend’Import ‘Echarts / lib / component / markpoint’
3. Using a lighter level tool library

Moment is a denchtancy lever, but it is too large and does not support Tree-Shaking by default, and our project is only used in Moment (), Format. ), add (), subtract () and other very simple methods, a bit large material, so we replace it with Date-FNs, what methods are required to introduce them directly.

After three steps above, we can see that Vendor.js becomes a lot, removes MOMENT, and our project is loaded on demand.

vue项目首屏加载时间优化实战 The third step: CDN optimization

In the above optimization, the VUE full bucket and Elementui still account for a large part of the Vendors volume, this part of the code is not Change, but will reload the HASH reloaded with each Vendors package. We can use CDN to remove this part of the public library that does not change often. We will introduce

Vue, Vue-Router, Vuex, Axios, jQuery, Underscore , using CDN resources. First, use bootcdn

1. First we add CDN code

2. Add WebPack configuration code in Vue.config.js, please refer to the address ConfigureWebPack: {ExternalS: {'Vue': 'Vue', 'Vue-Router': 'Vuerouter', 'Vuex': 'Vuex', 'Element-Ui': 'Element', 'Axios': 'Axios', 'Underscore': { Commonjs: 'underscore', AMD: 'Underscore', root: '_'}, 'jQuery': {Commonjs: 'jQuery', AMD: 'jQuery', root: '$'}},}
3. Remove the Vue.Use related code

It should be noted that by the CDN introduced, the write method is changed when using Vuerouter Vuex Elementui. . CDN will mount them on Window, so it is no longer used in Vue.use (XXX)

, and is also required to Import Vue from ‘Vue’, Import Vuerouter from ‘Vue-Router’.
  Excluding the full bucket and Element-UI, only the rest of the need to load Vendo for the first timeRs is very small.  
The benefits of using CDN have the following aspects
(1) Accelerate the packaging speed. After separating the public library, you will not packed these in the Vendors file each time you re-packed.

(2) CDN reduces the access pressure of its own server, and can achieve parallel downloads of resources. The browser is parallel to the loading of the SRC resource (execution is in order).

In the fourth step: Check if Nginx opens Gzip

As shown in the figure, the size of JS after Gzip is turned on less than about 2/3 than the Gzip. So if you don’t open Gzip, I feel that we have more significant. How do I see if my project is opened, as shown in the picture below, open GZIP, on the browser console Content-Encoding column will display Gzip, otherwise no. Nginx If you open GZIP, search it yourself, or call the server to open.


Fifth step: Check the routing lazy loading

Routing components If not on-demand If you load, all components will be packaged in App.js at a time, causing too many first load content, and also mentioned, address in Vue official documentation.

{Name: ‘VipboxActivity’, Path: ‘VipboxActivity’, Component (Resolve) {Require ([‘Components / Vipbox / VipboxActivity / Main.Vue’], Resolve )}},

{Path: ‘Buyersummary’, Name: ‘Buyersummary’, ComponenT: () => Import (‘views / buyer / buyersummary / index’),},

vue项目首屏加载时间优化实战 The method of the two introduction components above is correct, all Lazy loading that can be realized.

Finally vue项目首屏加载时间优化实战

Finally we can find that Vendor.js has a lot of size. One of the first steps to the third step we didn’t do, fourth steps and fifth steps we did. If you don’t do it, you must pay attention. Finally, I hope that this text can have a little helping to everyone, I hope everyone supports Tumi Cloud.

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment