How to optimize uniapp project? Share several optimization plans and suggestions

How to optimize the uniapp project? The following article will share with you some uniapp project optimization methods and suggestions. I hope it will be helpful to you.

Introduction: Performance optimization has been a top priority since ancient times. The most comprehensive collection of uniapp project optimization methods will be supplemented according to the development situation

1. Complex page data area is encapsulated into components

Scenario:

For example, the project contains similar forum pages: click a point Like icon, the number of likes should be 1 immediately, which will trigger the synchronization of all data at the page level from the js layer to the view layer, causing the data of the entire page to be updated, causing click delays and lags

Optimization plan:

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

Note: app- nvue and h5 do not have this problem; the reason for the difference is that the applet currently only provides a component difference update mechanism and cannot automatically calculate the difference for all pages

2. Avoid using large Figure

Scenario:

If a large number of large image resources are used in the page, it will cause page switching lag, causing the system memory to increase, or even a white screen Crash; base64ing large binary files is also very resource-intensive

Optimization plan:

Please compress the images before use, avoid large images, consider it if necessary Sprite pictures or svg, if simple code can achieve it, don’t use pictures

3. Mini programs and APP subcontract processing pages are too many

Go to the official website manual to view Configuration

4. Lazy loading of images

Function description:

This function is only for WeChat applet, App, Baidu mini program, ByteDance mini program are valid and are enabled by default

Go to uView manual to view the configuration

5. Abuse of local storage is prohibited

Don’t abuse local storage. Use URLs to transfer parameters between local pages. If you use local storage to transfer data, you must use naming conventions and destroy them on demand.

6. Variables can be defined externally.

In uni-app, every time the data defined in data changes, the view layer will be notified to re-render the page; so if it is not a variable required by the view, it does not need to be defined in data. Define variables externally or mount them 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 at one time, causing the view layer to render a large number of nodes at once, which may cause communication slowdown and page switching lags

Optimization plan:

Render the page by partially updating the page; for example, if the server returns 100 pieces of data, it can be loaded in batches, loading 50 pieces at a time, and the next load will be carried out after 500ms

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

• Reduce the scroll event monitoring of the scroll-view component. When monitoring scroll-view When a scroll event occurs, the view layer will frequently send data to the logic layer

• When listening to the scroll event of the scroll-view component, do not change the scroll-top / scroll-left properties in real time. Because when monitoring scrolling, the view layer communicates with the logic layer, and when scroll-top / scroll-left is changed, the logic layer communicates with the view layer, which may cause communication lag

• Note When onPageScroll is used for monitoring, the view layer will frequently send data to the logic layer

• Use more css animation instead of doing animation through the js timer operation interface

• If you need to do follow-up operations in canvas, it is recommended to use renderjs on the app side and web-view component on the applet side; pages in web-view do not have the concept of separation of logic layer and view layer. , naturally there will be no communication loss

9. CSS optimization

You need to know which attributes have inheritance effects, such as fonts, Font color and text size are inherited, meaningless repeated code is prohibited

10. Make good use of throttling and anti-shake

Anti-shake:

Wait n seconds to execute a function. If it is triggered again during the waiting period, the waiting time will be reinitialized

Throttling:

Trigger The event is only executed once within n seconds. If n seconds have not passed, it will be invalid if it is triggered again

11. Optimize page switching animation

Scenario:

When the page is initialized, there are a large number of pictures or native component rendering and a large amount of data communication. New page rendering and form entry animation will occur to compete for resources, resulting in page switching lags and frame drops.

Optimization plan ：

• It is recommended to delay 100ms~300ms to render images or complex native components, and conduct data communication in batches to reduce the number of nodes rendered at one time

• The animation effect on the App side can be customized; the dual-form linkage extrusion animation effect of popin/popout consumes more resources. If time-consuming js is executed on the page during the animation, it may cause the animation to drop frames. ;At this time, you can use animation effects that consume less resources, such as slide-in-right / slide-out-right

• App-nvue and H5, and also support page preloading,uni.preloadPage, can provide a better user experience

12. Optimize the background color to flash white

Scene:

The background flashes white when entering a new page. If the page background is dark, it may happen in the vue page that the new form has a gray-white background when it first starts animation, and changes to gray-white when the animation ends. Dark background, causing splash screen

Optimization plan:

• Write the style in App.vue to speed up page style rendering; The styles in App.vue are global styles. Every time a new page is opened, the styles in App.vue will be loaded first, and then the styles of ordinary vue pages are loaded.

• The app side can also be used in pages Configure the native background color of the page separately in the style of the .json page, for example, configure the global background color under globalStyle->style->app-plus->background

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

• nvue page does not have this problem, you can also change it to nvue page

13. Optimize startup speed

• The more code the project has, the larger the background image and local font files will be, which will have an impact on the startup speed of the mini program. You should pay attention to controlling the size

• Turn off white screen detection on splash on the App side Mechanism, if the homepage is always white or the homepage itself is an empty transfer page, splash may take 10 seconds to close

• When the App uses the v3 compiler and the homepage is an nvue page, And set to fast startup mode, at this time the App starts the fastest

• App is set to a pure nvue project (set the renderer under app-plus in the manifest: " native"), this kind of project starts faster and can be started in 2 seconds; because the entire application uses native rendering and does not load the webview-based framework

14. Optimize package size

• When uni-app is released to a small program, if the es6 to es5 and css alignment functions are used, the code size may increase. You can configure whether these compilation functions are enabled

• H5 side of uni-app. uni-app provides a tree-shaking optimization mechanism. The overall package volume of uni-app before tree-shaking optimization is about 500k. , 162k after the server deploys gzip. To enable tree shaking optimization, you need to configure the app side of

• uni-app in

  manifest. The Android basic engine is about 9M. The app also provides expansion modules, such as maps and Bluetooth. etc. If you don’t need these modules when packaging, you can cut them out to reduce the distribution package; the size can be selected in the manifest.json-App module permissions

• App support if you choose pure nvue Project (set the renderer: "native" under app-plus in the manifest), the package size can be further reduced by about 2M

• After the App side is running HBuilderX 2.7, the App side has dropped non-v3 Compilation mode, the package size is reduced by 3M

##15. Abuse of external js plug-ins is prohibited

Description:

If there is an official API, do not use additional js plug-ins to increase the project size

For example:

Url directly uses encodeURIComponent() and decodeURIComponent() to pass the password

Recommended: "

uniapp tutorial"

The above is the detailed content of How to optimize uniapp project? Share several optimization plans and suggestions. For more information, please follow other related articles on the PHP Chinese website!