Problems to be solved

Wechat applets are now limited in size,

  • The whole small program all subcontracting size is not more than 20M
  • The size of a single subcontract/main package cannot exceed 2M

There are a few things you can look at when developing large projects

Corresponding Suggestions

CDN on static resources

Putting static resources such as pictures, videos, audio and font packages into THE CDN server can save a lot of checkup

The compression code

The introduction of JS CSS compression, the introduction of the third component is also using the mini version

The page uses H5 instead

Change frequently modified pages to H5, such as the details page, through the WebView to display. Even if you save volume, you can’t redistribute the applet when you modify it. In the case of app synchronization. You don’t have to relaunch your app.

Clean up useless resources

Some useless resources, NPM packages, components, static resources are unavoidable during the various changes in project development. Delete the

Get rid of duplicate code,

Extract common code and components

Use third-party plug-ins with caution

Use third-party plugins as little as possible, such as Echart, where you may only need 1% of its functionality, a graph, but have to package it and make the whole project explode in size.

Configuration subcontracting (general subcontracting)

Subcontracting is a scheme similar to web asynchronous introduction given by small programs. Some pages that are not needed in the initial entry can be put into the subcontracting, and the subcontracting can be downloaded when jumping to the corresponding page. Putting these pages and their affiliated resources into the subcontracting can effectively reduce the volume of the main package.

Configure independent subcontracting

Independent subcontracting is a special type of subcontracting in small programs that can operate independently of the main package and other subcontracting. There is no need to download the main package when entering the applet from the standalone subcontracting page. The main package is downloaded only when the user enters the normal package or main package page.

Some pages with some functional independence can be configured into independent subcontracting as needed. When the applets start from the normal subcontracting page, the main package needs to be downloaded first; Independent subcontracting can run independently of the main package, which can greatly improve the startup speed of the subcontracting page.

Subcontracting refinement

This policy is used to control and reduce the volume of the main package, optimize the volume of the main package, and prevent unused resources from being put into the main package and occupy the volume of the main package.

To collect only the resources used by the subcontract to the subcontractor, such as pictures, js, modules, components, NPM package, etc The optimal, in order to make sure that the main package volume for a component and static resources, if they are multiple subcontract the referenced and not in the main reference in the package, these resources can be generated more copies respectively in the output to the corresponding to the subcontract, and won’t occupy the main package volume.

Volumetric analysis

When we have a big main package, we need to figure out, what’s in the main package? Why are they so big?

You can use the analysis tool that comes with native applets developer tools, or you can use webpack-bundle-Analyzer, a Webpack plug-in, to do the auxiliary analysis. It can intuitively analyze what files are packaged, what the size ratio is, the relationship between modules, dependencies, and whether files are repeated. We can optimize the size after compression.

Startup diagram scheme

The startup diagram is most commonly seen in app. Although it is rare in small programs, it is a very good plan.

Once the page is rendered, it will immediately jump to other subcontracting pages. The main package only has one start page and the basic library used by the whole project. In this way, the volume of the main package is basically fixed, and continuous business iteration will not increase the volume of the main package.

Although the solution is effective, you need to evaluate whether it is suitable for your business and whether the experience is acceptable.