For some of the principles and similarities and differences of applets, refer to the previous article: Things you may not know about Applets

Summarize this article based on actual optimization data. Without further ado, let’s cut to the chase

The length of the first screen is closely related to resource preparation.

In other words, if we wanted to speed up the rendering of the first screen, we had to keep the size of the first load tight. How to control the package size can be controlled from the following two aspects:

  1. The subcontract to load
  2. Compressed package

After all this processing, we get something like this

Therefore, do not always feel that the project is very simple at the beginning, do not need anything, it is better not lazy, the planning of the planning, or to the later change to change will want to cry.

Put the pages that users might click on the first time they enter into the main package, and the rest in the sub-package. The following directory

├─ Pages Mini-app ├─... ├─subPages ├─...Copy the code

We then configure the main package and subpackage in app.json

{
    "pages": [
        "pages/index/index"]."subPackages": [{"root": "subPages"."pages": [
                "pages/fenbao/fenbao"]]}}Copy the code

And you’re done. But when is the subcontract loaded?

If you wait until the user enters the subcontract to load it, it is too slow. Fortunately, the preload configuration is provided. As follows:

{
    "preloadRule": {
        "pages/index/index": {
            "network": "all"."packages": [
                "subPages"]}}}Copy the code

When I go to pages/index/index, I start preloading the contents of subPages. Such a toss, when entering subcontracting, the perception is not very obvious.

But here’s the catch. At first, we used the following directory to run the applet and upload the preview.

├─ Pages Mini-app ├─... ├─subPages ├─... ├─ App.js import file ├─app.json Configuration file ├─app.css Main CSS file ├─config Gulp Configuration file ├─gulpfile.js Gulp fileCopy the code

As it turns out, the applet is naive enough to upload all the files in the directory at once, meaning that to use the applet, it also needs to download the config folder and gulpfile.js code that is useless at runtime.

So, rearrange the top directory to look like this, and run the applet to select the SRC directory

├─ SRC source // Focus here ├─ Pages Mini-program page ├─.... ├─subPages Content ├─.... ├─ App.js Import File ├─app.json Configuration file ├─app.css Main CSS file... │ ├─ Gulpfile.js │ ├─config │ gulp │ ├─gulpfile.js │ gulp │Copy the code

Such an experience, the speed is fast, the waist does not hurt, the hair does not fall. But it still feels slow, so compress another wave of code. Although the small program official said that check automatic compression code, will help us to compress, but do not know why, did not…… Their compression operation again a wave, the speed and significantly faster.

Very simple, using gulp to do a wave of operations, the most important is to compress a wave of images, remove the relevant comments and so on, the code is relatively simple

gulp.src('./src/**/*.wxml').pipe(stripComments()).pipe(gulp.dest(distPath))
gulp.src('./src/**/*{.png,.jpg,.gif,.svg}').pipe(imagemin({ progressive: true })).pipe(gulp.dest(distPath))
Copy the code

As for the third picture, interface cache, etc., there are a lot of data on the Internet, I will not be here to embarrass ~

@Author: beidan