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.
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
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
Go to the official website manual to view Configuration
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
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.
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
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
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
You need to know which attributes have inheritance effects, such as fonts, Font color and text size are inherited, meaningless repeated code is prohibited
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
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
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
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
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
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
Description:
If there is an official API, do not use additional js plug-ins to increase the project sizeFor 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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
