Optimization Methods and Suggestions of uniapp Project

Catalog 1. Complex page data areas encapsulated into components
Step 2 Avoid using large diagrams
3. Too many small programs and APP subcontracts to deal with pages
4. Pictures are lazy to load
5. Prohibit misuse of local storage
6. You can define variables externally
7. Load data in batches to optimize page rendering
8. Avoid frequent communication between view layer and logic layer 9. CSS optimization
10. Make good use of throttling and anti-shake
11. Optimize page switching animation
12. Optimize the background color to flash white
13. Optimize startup speed 14. Optimize package volume 15. Prohibit misuse of external js plug-ins

1. Complex page data areas are encapsulated into components

Scenario:

For example, the project contains a similar forum page: click on a like icon, and the number of likes should be +1 immediately, which will cause all the data at the page level to be synchronized from the js layer to the view layer, causing the data update of the whole page, causing the click delay to be stuck

Optimization scheme:

For complex pages, when updating the data of a certain area, you need to make this area into a component, so that only this component is updated when updating the data

Note: app-nvue and h5 do not have this problem; The reason for the difference is that the applet only provides the mechanism of updating the component difference at present, and cannot automatically calculate all the page differences

Step 2 Avoid using large diagrams

Scenario:

If a large number of large picture resources are used in the page, it will cause the page switching to be stuck, resulting in the increase of system memory and even the collapse of the white screen; base64 for large binary files is also very resource-intensive

Optimization scheme:

Please compress the pictures and use them to avoid large pictures. If necessary, you can consider Sprite pictures or svg. Do not use pictures if you can realize simple codes

3. Too many small programs and APP subcontracts to deal with pages

Go to the official website manual to check the configuration

4. Pictures are lazy to load

Function description:
This function is only valid for WeChat applet, App, Baidu applet and ByteDance applet, and is turned on by default
Go to the uView manual to view the configuration

5. Prohibit misuse of local storage

Don't abuse local storage. Use url to transfer parameters between local pages. If you use local storage to transfer data, you should name the specification and destroy it as needed

6. You can define variables externally

In uni-app, every time the data defined in data changes, the view layer will be notified to re-render the page; Therefore, if the variables are not required by the view, they can not be defined in data, but can be defined externally or mounted directly on the vue instance to avoid wasting resources

7. Load data in batches to optimize page rendering

Scenario:
When the page is initialized, the logic layer transmits a large amount of data to the view layer once, which makes the view layer render a large number of nodes once, which may cause slow communication and jamming of page switching

Optimization scheme:
Render the page by updating the page locally; For example, if 100 pieces of data are returned by the server, they can be loaded in batches, 50 pieces can be loaded at one time, and the next loading can be carried out after 500ms

8. Avoid frequent communication between the view layer and the logic layer

Reduces scroll event listening in scroll-view components. When listening for scroll-view scrolling events, the view layer will frequently send data to the logical layer Do not change the scroll-top/scroll-left property in real time when listening to the scroll event of scroll-view component, because when listening to scroll, the view layer communicates to the logical layer, and when changing scroll-top/scroll-left, the logical layer communicates to the view layer again, which may cause communication jamming Pay attention to the use of onPageScroll. When onPageScroll is listening, the view layer will frequently send data to the logical layer Use css animation instead of using js timer operation interface to animate If you need to do hand-to-hand operation in canvas, renderjs is recommended on app side, and web-view component is recommended on applet side. The pages in web-view do not have the concept of separation of logical layer and view layer, and naturally there will be no communication loss

9. CSS optimization

You should know which attributes are inherited, such as font, font color and text size, and prohibit meaningless duplication of code

10. Make good use of throttling and anti-shake

Anti-shake:
After waiting for n seconds to execute a function, if the waiting period is triggered again, the waiting time is reinitialized
Throttling:
Trigger event n seconds is only executed once, n seconds is not over, and it is invalid to trigger again

11. Optimize page switching animation

Scenario:
When the page is initialized, there are a lot of pictures or native components rendering and a lot of data communication, which will lead to new page rendering and form entering animation to grab resources, resulting in page switching jamming and frame dropping

Optimization scheme:

It is suggested to delay 100ms ~ 300ms to render pictures or complex native components and communicate data in batches to reduce the number of nodes in one-time rendering App animation effect can be customized; The double-form linkage extrusion animation effect of popin/popout consumes more resources. If the time-consuming js is executed in the page during animation, it may cause animation frame drop; You can use animation effects that consume less resources, such as slide-in-right/slide-out-right App-nvue and H5 also support page preloading, uni.preloadPage for a better experience

12. Optimize the background color to flash white

Scenario:
When entering a new page, the background flashes white. If the background of the page is dark, it may happen in the vue page that the new form has a gray background at the beginning of animation and a dark background at the end of animation, resulting in a flashing screen

Optimization scheme:

Writing styles in App. vue can accelerate the rendering speed of page styles; The styles in App. vue are global styles. Each new page will be loaded with the styles in App. vue first, and then the styles of ordinary vue pages will be loaded

The app side can also configure the page native background color separately in style of the pages. json page, for example, in globalStyle- > style- > app-plus- > Configuring Global Background Color under background

"style": { "app-plus": { "background":"#000000" } }

The nvue page does not have this problem, or you can change it to an nvue page

13. Optimize startup speed

The more engineering code, including background picture and local font file, the larger it is, which has an impact on the starting speed of small programs. Attention should be paid to controlling the volume splash on App has a white screen detection mechanism. If the homepage 1 is a straight white screen or the homepage itself is an empty transit page, it may cause splash to close for 10 seconds App uses v3 compiler. When the first page is nvue page and is set to fast startup mode, App startup speed is the fastest

App is set to pure nvue project (app-renderer under plus is set in manifest: "native"), which has faster start-up speed and can be completed in 2 seconds; Because the whole application uses native rendering, it does not load the framework based on webview

14. Optimize package volume

When uni-app is released to a small program, if the alignment function of es6 to es5 and css is used, the code volume may be increased. You can configure whether these compilation functions are turned on or not H5 terminal of uni-app and uni-app provide tree shaking optimization mechanism. The overall package volume of uni-app before tree shaking optimization is about 500k, and 162k after gzip is deployed on the server. Turning on tree shaking optimization needs to be configured in manifest The App side of uni-app, the basic engine of Android is about 9M, and App also provides extension modules, such as maps, Bluetooth, etc. If these modules are not needed during packaging, they can be cut out to reduce the distribution package; Volume can be selected in manifest. json-App module permissions The App side supports that if the pure nvue project is selected (app-renderer under plus is set in manifest: "native"), the packet volume can be reduced by about 2M in one step After HBuilderX 2.7 on App, the non-v3 compilation mode was dropped on App, and the packet volume decreased by 3M

15. Prohibit misuse of external js plug-ins

Description:
If there is an official API, don't refer to the js plug-in to increase the project volume
For example:
url is transmitted directly by encodeURIComponent () and decodeURIComponent ()