How can I slim down your WeChat applet ?, Small Program slimming

How can we reduce the size of your applet ?, Small Program slimming

As we all know, the size of submitted Code is limited to 1 MB when a applet is released! Therefore, if you are writing a small program with slightly more complex functions, you must always be careful when your code is hitting the bottom line.

At the beginning of designing a small program, we need to focus on this and adopt some methods to avoid this problem too early.

Avoid using large local images and large source files

• Avoid using large images on the UI of the applet. Try to use color styles to decorate your applet.

• Or, use small and exquisite icons for embellishment.

• If you really want to use a large image, do not put the image into the local code of the applet. You should load the image from a remote URL.

In this way, you can avoid packaging large images, large source files, and so on into the small program release package.

Don't make your code too cool

At the JavaScript code level, Please carefully consider your code logic. Do not write a lot of simple logic. Please optimize and streamline your code.
At the view level, avoid unnecessary component nesting as much as possible. If you can use one view, you should not set up multiple views. This is good for reducing code size and code performance :)

Use tools to compress optimization code

In the development and release of HTML5 and other Web Front-end projects, we usually use some front-end engineering tools to process our code, such as using Gulp and some functional plug-ins, such: uglify, cssnano, htmlmin, etc. With these tools, we can reduce the size of our code so much (about 20% ~ 30% ).

Fortunately, these tools are also useful for small program development! By simply using these tools, we can reduce our code so much. Why not ?!

In small programs, we have roughly several types of files that can be optimized using tools:

• JSON File
  We can use jsonminify to compress JSON files and remove unnecessary spaces in JSON files.

• JavaScript files
  Use uglify to optimize JS code syntax and compress text

• WXML File
  Htmlmin can be used to clear unnecessary spaces and comments in WXML files.

• WXSS File
  You can use the features provided by LESS to merge global WXSS In the applet; Use cssnano to clean and compress WXSS files; Use autoprefixer to add prefixes in different environments to WXSS, good compatibility

• Image File
  Imagemin can be used to optimize the size of image files.

• The H5 program Club is a public number that focuses on small program learning and communication, and publishes information on outsourcing/recruitment requirements.