WeChat Mini Program Detailed explanation of weight loss techniques and methods with a 1M limit

WeChat Mini Program Weight Loss Method:

As we all know, when the WeChat Mini Program is released, there is a 1M size limit on the submitted code! Therefore, if you are writing a small program with a slightly more complex function, you must always pay attention to whether your code is about to hit this bottom line.

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

Avoid using large local pictures and large resource files

Please avoid using large pictures on the UI of the mini program, and try to decorate your mini program with color styles as much as possible

Or, use small and exquisite icons to embellish it

If you really want to use large pictures, please do not put the pictures into the local code of the mini program. You should load the pictures from a remote URL address. Method

This way you can avoid packaging large pictures, large resource files, etc. into the mini program's release package.

Don’t make your code too verbose

At the JavaScript code level, please carefully consider the logic of your code. Don’t write a lot of very simple logic. Please optimize it. and streamline your code.

At the view level, try to avoid unnecessary nesting of components. If you can do it with one view, don’t add another layer of views. This is good for reducing code size and code performance:)

Use tools to compress and optimize code

In the development and release of web front-end projects such as HTML5 today, we usually use Some front-end engineering tools are used to process our code, such as using Gulp, combined with some functional plug-ins, such as: uglify, cssnano, htmlmin, etc. Using these tools can make our code size smaller (about 20%~30%).

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

In the mini program, we have roughly the following types of files that can be optimized using tools:

JSON files

We can use jsonminify to compress JSON files, go to JSON Extra spaces in the file

JavaScript file

Use uglify to optimize syntax and text compression of JS code

WXML file

Use htmlmin to Clean up excess spaces, comments, etc. in the WXML file

WXSS file

You can use the features provided by LESS to merge the global WXSS in the applet; use cssnano to clean and merge the WXSS file Compression; use autoprefixer to add prefixes in different environments to WXSS to achieve good compatibility

Image file

By using imagemin, it can be used to optimize the size of image files

The following is a Gulp script I use for your reference:

package.json

{
 "name": "myproject",
 "version": "1.0.0",
 "description": "my project",
 "author": "Kevin Zhang <zarknight@gmail.com>",
 "scripts": {
  "build:prod": "gulp build:prod",
  "build:clean": "gulp build:clean",
  "watch:clean": "gulp watch:clean",
  "start": "npm run watch:clean"
 },
 "devDependencies": {
  "autoprefixer": "^6.6.0",
  "babel-eslint": "^7.1.1",
  "babel-preset-latest": "^6.16.0",
  "del": "^2.2.2",
  "gulp": "^3.9.1",
  "gulp-babel": "^6.1.2",
  "gulp-cssnano": "^2.1.2",
  "gulp-eslint": "^3.0.1",
  "gulp-htmlmin": "^3.0.0",
  "gulp-if": "^2.0.2",
  "gulp-jsonlint": "^1.2.0",
  "gulp-jsonminify": "^1.0.0",
  "gulp-less": "^3.3.0",
  "gulp-load-plugins": "^1.4.0",
  "gulp-postcss": "^6.2.0",
  "gulp-rename": "^1.2.2",
  "gulp-sourcemaps": "^2.2.1",
  "gulp-uglify": "^2.0.0",
  "run-sequence": "^1.2.2"
 }
}

gulpfile.js

const gulp = require('gulp')
const del = require('del')
const runSequence = require('run-sequence')
const autoprefixer = require('autoprefixer')
const $ = require('gulp-load-plugins')()
 
let prod = false
 
// -------------------- Clean --------------------------
 
gulp.task('clean', () => {
 return del(['./dist/**'])
})
 
// -------------------- Lint ---------------------------
 
gulp.task('eslint', () => {
 return gulp.src(['./src/**/*.js'])
  .pipe($.eslint())
  .pipe($.eslint.format())
  .pipe($.eslint.failAfterError())
})
 
gulp.task('jsonlint', () => {
 return gulp.src(['./src/**/*.json'])
  .pipe($.jsonlint())
  .pipe($.jsonlint.reporter())
  .pipe($.jsonlint.failAfterError())
})
 
// -------------------- JSON ---------------------------
 
gulp.task('json', ['jsonlint'], () => {
 return gulp.src('./src/**/*.json')
  .pipe($.if(prod, $.jsonminify()))
  .pipe(gulp.dest('./dist'))
})
 
gulp.task('json:watch', () => {
 gulp.watch('./src/**/*.json', ['json'])
})
 
// -------------------- Assets --------------------------
 
gulp.task('assets', () => {
 return gulp.src('./src/assets/**')
  .pipe(gulp.dest('./dist/assets'))
})
 
gulp.task('assets:watch', () => {
 gulp.watch('./src/assets/**', ['assets'])
})
 
// -------------------- WXML -----------------------------
 
gulp.task('templates', () => {
 return gulp.src('./src/**/*.wxml')
  .pipe($.if(prod, $.htmlmin({
   collapseWhitespace: true,
   removeComments: true,
   keepClosingSlash: true
  })))
  .pipe(gulp.dest('./dist'))
})
 
gulp.task('templates:watch', () => {
 gulp.watch('./src/**/*.wxml', ['templates'])
})
 
// -------------------- WXSS ------------------------------
 
gulp.task('styles', () => {
 return gulp.src(['./src/**/*.wxss', '!./src/styles/**'])
  .pipe($.less())
  .pipe($.postcss([
   autoprefixer([
    'iOS >= 8',
    'Android >= 4.1'
   ])
  ]))
  .pipe($.if(prod, $.cssnano()))
  .pipe($.rename((path) => path.extname = '.wxss'))
  .pipe(gulp.dest('./dist'))
})
 
gulp.task('styles:watch', () => {
 gulp.watch('./src/**/*.wxss', ['styles'])
})
 
// -------------------- JS --------------------------------
 
gulp.task('scripts', ['eslint'], () => {
 return gulp.src('./src/**/*.js')
  .pipe($.babel())
  .pipe($.if(prod, $.uglify()))
  .pipe(gulp.dest('./dist'))
})
 
gulp.task('scripts:watch', () => {
 gulp.watch('./src/**/*.js', ['scripts'])
})
 
// ---------------------------------------------------------
 
gulp.task('build', [
 'json',
 'assets',
 'templates',
 'styles',
 'scripts'
])
 
gulp.task('watch', [
 'json:watch',
 'assets:watch',
 'templates:watch',
 'styles:watch',
 'scripts:watch'
])
 
gulp.task('build:clean', (callback) => {
 runSequence('clean', 'build', callback)
})
 
gulp.task('watch:clean', (callback) => {
 runSequence('build:clean', 'watch', callback)
})
 
gulp.task('build:prod', (callback) => {
 prod = true
 runSequence('build:clean', callback)
})
 
gulp.task('default', ['watch:clean'])

I hope it will be helpful to you. If you encounter any questions, you can leave a message to me and I will try my best to help you answer it.

For more WeChat mini-programs, please pay attention to the PHP Chinese website for detailed explanations of weight loss techniques and methods with a limit of 1M!