Author: HerryLo

Link to original blog post

I will talk about the performance optimization of wechat applet from the code level and project level, hoping to be helpful. Is also a recent summary of their own. (Prior knowledge: The view layer of wechat applet is supported by WebView, and the logic layer is supported by JSCore. The logic layer interacts with the view layer through setData. Each page is a WebView page.

See: running environment of small program

The following contents are applicable to both the development of the Taro framework and the native development of wechat mini programs.

  • The code level
    • Break up the component
    • Image compression
    • Reduce unnecessary data
    • Avoid frequent setData
    • Use webView component development
  • Project level
    • Split applet
    • Subcontract preloading
    • Upgrade the version library as much as possible

# Code level

There’s a lot of room to improve performance through code details. For the relatively early small program project, because the code details did not take too much into account, also led to the development of small program is very performance consumption. Some of the points mentioned below will be of some help in both ongoing development and maintenance projects.

#๐Ÿ‘‡ยท Split components

For small program projects, due to aggressive development, component splitting is not considered much. Companies that focus on component development certainly plan early on. Good component separation, can ensure the reuse of components, reduce a lot of repeated code. Component development is an idea that applies to almost all front-end development projects these days. How do you split components effectively?

#๐Ÿ‘‡ยท Image compression

In the wechat mini program project, pictures will not be stored locally, but are basically network pictures, and the download of network pictures will consume a certain amount of time and memory. The smaller image size can improve the rendering time of small programs and reduce memory footprint. Obtaining image resources through the CDN static resource server and adding image compression rules can greatly improve performance.

ยท Reduce unnecessary data

Reduce redundant data in data. Unnecessary data. Passing setData can cause unnecessary performance drain. Suggestion: Do not directly save all interface data in data. Only the data that needs to be rendered on the page can be mounted by setData. Unnecessary data can be directly mounted on this of the current page.

Let data = {list: [item, item, item, item, item], title: "XXXX ", path: 'xx/xx/xx'} // โŒ Data}) // ๐Ÿ‘Œ Good handling only mounts the necessary parameter this.setData({dataList: data.list}) this.title = data.title this.path = data.pathCopy the code

ยท Avoid frequent setData

This.setdata ({count: 1}) this.setdata ({count: 2}) this.setdata ({count: 3})Copy the code

Will setData fire all three times? Yes, it’s called all of them.

In wechat applet, unlike React, merge multiple operations. Each setData process is an interaction between the JSCore logic layer and the webView view layer. Too much interaction will reduce the user experience of small programs. For example, sliding, listening to scrolling, and operating setData consume very much performance, so you can consider using throttling functions to reduce the call frequency.

The call of setData interface involves the thread communication between the logic layer and the rendering layer. Too frequent communication may lead to processing queue blocking, and the interface rendering is not timely, resulting in the lag. Frequent calls that are useless should be avoided. Let’s modify the code above.

// ๐Ÿ‘Œ let data = {count: 1} data.count = 2; data.count = 3; this.setData(data)Copy the code

#๐Ÿ‘‡ยท webView component development

Pages with very strong flexibility need to be used at the same time. It is recommended to use the webView component provided by wechat mini program to develop pages using H5 pages to avoid repeated development. When the wechat small program package is too large, it is also recommended to use H5 page replacement development. See the webView component for details

<web-view src="{{link}}" bindmessage="bindMes" bindload="bindLoad"/>
Copy the code

# Project level

Through wechat small program project configuration to improve the loading performance, the following solution can effectively solve the problem, but also to try the situation depends on.

#๐Ÿ‘‡ยท Split applets

In the case of large packages, small packages can be split, see: subcontract loading. Subcontracting the applets optimizes the download time for the first startup of the applets and allows better decoupling and collaboration when multiple teams work together. If the business is large, you can also separate out a new small program.

ยท Subcontract preloading

With the subcontracting configuration, subcontracting also takes time to load. For some commonly used or important pages, subcontracting preloading can be adopted to complete the preloading of subcontracting and reduce the loading time of subcontracting.

See subcontract pre-download for details

ยท Upgrade the version library as much as possible

Pay attention to the problems of the base version library, and upgrade the version library as far as possible to the latest version. Because the version library is updated, many problems can be effectively avoided.

** Ridicule: ** At present, with the continuous iteration of major companies’ business, the volume of small programs has been really large, small programs gradually not small. Hope as far as possible to let small procedures **** small up, play its small role. Hope the above content can help you.

More:

Personal development guide for small programs

See more blog posts:

Personal gold digging more articles link jump;

GitHub blog project links to more articles jump;