uniapp project optimization methods and suggestions

1. Encapsulate complex page data areas into components

Scenario:

For example, the project contains a forum page like this: Clicking a like icon will immediately increase the number of likes by 1, which will cause all the data at the page level to be synchronized from the js layer to the view layer, causing the data of the entire page to be updated, resulting in click delays and freezes.

Optimization plan:

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

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

2. Avoid using large images

Scenario:

If a page uses a large number of large image resources, it will cause page switching to be stuck, resulting in increased system memory and even white screen crash; base64 conversion of large binary files is also very resource-intensive.

Optimization plan:

Please compress the images before use, avoid using large images, and consider using sprites or SVG if necessary. Do not use images if simple code can achieve the desired result.

3. Mini Programs and APPs process too many pages in subpackages

Go to the official website manual to view the configuration

4. Lazy loading of images

Functional description:
This function is only valid for WeChat Mini Programs, Apps, Baidu Mini Programs, and ByteDance Mini Programs. It is enabled by default. Go to the uView manual to view the configuration.

5. Prohibit the abuse of local storage

Do not abuse local storage. Use URLs to pass parameters between local pages. If you use local storage to pass data, you must name it in a standardized manner and destroy it on demand.

6. Variables can be defined externally

In uni-app, the data defined in data will notify the view layer to re-render the page every time it changes; so if the variable is not required by the view, it can be defined in data. You can define the variable externally or mount it 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 passes a large amount of data to the view layer at one time, causing the view layer to render a large number of nodes at one time, which may cause communication to slow down and page switching to be stuck.

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, 50 pieces at a time, and the next load will be performed 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 the scroll event of the scroll-view component, the view layer will frequently send data to the logic layer.
• When monitoring the scrolling events of the scroll-view component, do not change the scroll-top / scroll-left properties in real time, because when monitoring the scrolling, the view layer communicates with the logic layer, and when changing scroll-top / scroll-left, the logic layer communicates with the view layer, which may cause communication jams.
• Note the use of onPageScroll. When onPageScroll is listening, the view layer will frequently send data to the logic layer.
• Use more CSS animations instead of using JS timer to operate the interface for animation
• If you need to do hand tracking operations in canvas, it is recommended to use renderjs on the app side and web-view components on the mini program side; the pages in web-view do not have the concept of separation between the logic layer and the view layer, so there will naturally be no communication loss.

9. CSS Optimization

You need to know which properties have inherited effects, such as font, font color, and text size. Do not repeat meaningless code.

10. Make good use of throttling and anti-shake

Image stabilization:
Wait for n seconds before executing a function. If it is triggered again during the waiting period, the waiting time will be re-initialized and throttled:
The trigger event is executed only once within n seconds. If n seconds have not passed, the next trigger will be invalid.

11.Optimize page switching animation

Scenario:
When the page is initialized, there are a large number of images or native components rendering and a large amount of data communication. The new page rendering and the form entering animation will compete for resources, causing page switching to be stuck and frame drops.

Optimization plan:

• It is recommended to delay 100ms~300ms to render images or complex native components, and perform data communication in batches to reduce the number of nodes rendered at one time.
• The animation effects on the App side can be customized; the popin/popout dual-window linkage extrusion animation effect consumes more resources. If the page is executing time-consuming js during the animation, it may cause the animation to drop frames. In this case, 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, which can provide a better user experience

12.Optimize the background color flash white

Scenario:
The background flashes white when entering a new page. If the page background is dark, the new form may start to animate with a gray-white background in the Vue page, and then turn to a dark background when the animation ends, causing a flash screen.

Optimization plan:

Writing styles in App.vue can speed up page style rendering; the styles in App.vue are global styles. Each time a new page is opened, the styles in App.vue will be loaded first, and then the styles of ordinary vue pages will be loaded.

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

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

The nvue page does not have this problem, and you can also change to the nvue page

13. Optimize startup speed

• The more project code there is, including the background image and local font files, the larger they are, which will affect the startup speed of the mini program. You should pay attention to controlling the size.
• The splash screen on the App side has a white screen detection mechanism. If the homepage is always white or the homepage itself is an empty transfer page, it may take 10 seconds for the splash screen to close.
• When the App uses the v3 compiler and the home page is the nvue page, and is set to fast startup mode, the App starts the fastest at this time.

App is set as a pure nvue project (set renderer: "native" under app-plus in the manifest). This kind of project starts faster and can be started in 2 seconds; because it uses native rendering throughout the application and does not load the framework based on webview

14. Optimize package size

• When uni-app is released to mini-programs, 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.
• On the H5 side of uni-app, uni-app provides a tree shaking optimization mechanism. The overall package size of uni-app before tree shaking optimization is about 500k, and 162k after gzip deployment on the server. To enable tree shaking optimization, you need to configure it in the manifest
• The App side of uni-app, the Android basic engine is about 9M. The 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; the size can be selected in manifest.json-App module permissions
• App supports that if you choose a pure nvue project (set renderer: "native" under app-plus in the manifest), the package size can be further reduced by about 2M
• After HBuilderX 2.7, the App side removed the non-v3 compilation mode, and the package size dropped by 3M

15. Prohibit the abuse of external js plug-ins

describe:
If there is an official API, do not add additional js plug-ins to increase the project size, for example:
Use encodeURIComponent() and decodeURIComponent() to encrypt the URL.

This is the end of this article about uniapp project optimization methods and suggestions. For more relevant uniapp project optimization content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!