background

With the continuous growth of the company’s business, recently there is always a user reaction company APP mall open relatively slow, this can not ah, slow easy to lose users, loss of users to reduce the company’s performance, the company’s performance less my year-end bonus is less ………… So start optimizing for your company and for yourself.

Mall system was developed last year, which is a SPA project based on VUe2.0. Of course, the best optimization idea is to cooperate with native mobile terminal students to hybird it, but the time cycle is too long and the transformation is too big. Besides, some native mobile terminal students also leave after the New Year, resulting in a shortage of staff, so we have to transform it by ourselves.

Related articles:

Mobile SPA mall optimization (two) — Webpack packaging speed optimization


start

This is the first screen optimization, only talk about the first screen optimization part, first take a look at the first screen fully loaded what looks like,



Loading step diagram

First of all, click the mall in the bottom bar of the native APP to enter the H5 page. The moment will look like this.



After 1-2s (no cache), you will see the following loading animation.



Then loading2-3s is fully loaded out



The total loading time is about 3-5s.


1. Optimization before entering page H5

The blank screen time here mainly refers to webView initialization on the mobile terminal and loading static resources of H5. There are four optimization points here:

1. Global WebView

Methods:

  • Initialize a global WebView standby and hide it when the client starts.

  • When the user visits the WebView, the WebView is directly used to load the corresponding web page and display it.

This method can effectively reduce the first opening time of WebView in App. There is no need to initialize the WebView time when the user accesses the page.

This requires the cooperation of mobile terminal students.

2. Front-end code packaging optimization

First of all, we need to see what things are loaded on the first screen, the most important ones are these, among which app and Vendor have hundreds of K



And then you start analyzing why is the file so big, execute

npm run build --reportCopy the code

Then you’ll see a graph that looks something like this.

(The figure is found on the Internet, and there is no analysis of the project, afraid of being said by the director to leak the source code ~)


Then, looking at vendor.js, there are some packages of Lodash and Moment as well as some plug-in packages of the third party, which are all lazy holes left by the schedule at that time, so I wrote all by my own handwriting, removing the volume of some packages of the third party. Then lazily load some packages that are not used on the home page and no longer place them in the global reference.

Other ways to optimize volume include:

Tree-shaking: Remove unused code

UglifyJsPlugin: Compressed code

ExtractTextPlugin: Extracts the CSS

These have been used before, not in this optimization task, not in detail, you can refer to the plug-in usage.

3.pwa

The offline-plugin plugin is recommended for use in this article:

Easy implementation of PWA with offline-Plugin and Webpack

This time pWA is used mainly for its offline cache, which is the same as HTTP cache, but more controllable.

4. Loading animation moves forward

Now, loading animation can only be seen after the loading of H5 static resources is completed, and there is still a blank screen time in the middle of the optimization of H5 static resources. Therefore, we add loading animation on the mobile terminal, and remove the loading animation of H5 and replace it with skeleton screen, as detailed below.


2. Optimization after page H5

Loading animation is displayed after loading h5 static resource. What is loading animation doing? Interface A requests interface B, and interface B requests interface A…… There are four optimization points:

1. The frame screen

A page into the first load skeleton screen placeholder, and then to data filling.



We wrote the skeleton screen ourselves, or we can use plug-ins

vue-skeleton-webpack-plugin

Usage can be found here:

Add a skeleton screen to the VUE project

2. Change some front-end requests to Intranet requests of the server

Such as user information such as interface was front after the request to get the user information, and then take the user information to request page data relevant to the user, but some network unstable place serial interface is easy to slow, if a timeout will also have to request it again, so this kind of move to the service side, directly into a network call interface, is not affected by the client network environment.

3. Split the interface, render the page in batches, and cache some interface data in localstorage

In order to catch up with the time, the data interface of the home page returned all the data by the same interface, so the back end had to check many tables. This time, we split an interface into multiple interfaces, which were loaded and filled in batches. In addition, the front-end cache of the data with less frequent changes, such as commodity classification, into localstorage. First go to localStorage to get data rendering, and then dynamic update.

First get not to distinguish between the user’s general home page data, and the cache can be cached up, the next direct use does not go interface.



Then the user-related data comes back and is rendered in batches




The final optimization results are as follows:

There is no white screen time. H5 skeleton screen can be seen after 1s of original loading animation, and all data loading can be seen within 2s.

The overall speed is optimized from the original 3-5s to 1-2s, and the cache can be opened in seconds. Of course, there are other areas that can be optimized, which can be added after optimization.


Why didn’t vuE-SSR be used for first screen optimization

Have students ask why don’t the vue first screen optimization – the SSR, actually is the use of, but the company because more important project came in, yue four company staff is not enough, so the first on the basis of the old is optimized, such as taking the time to render the service side optimization, then change again after the meeting to share an article about the optimization of spa migration SSR ~


The last

In fact, there is no formula for performance optimization, or according to the specific project specific analysis, each project can be optimized point and optimization method is not the same, can not only rigid set yahoo catch-22 formula optimization criteria.

This is the first mobile SPA mall optimization, later will also say about the webpack speed optimization, code packaging optimization, animation optimization and other aspects of personal experience, if you like it, like it ~.


(The article is originally arranged, reproduced please indicate the source, thanks ~)