Detailed explanation of optimizing your WeChat mini program

This article mainly introduces you to the relevant information about WeChat applet weight loss. The introduction in the article is very detailed and has certain reference and learning value for everyone. Friends who need it can take a look below.

Preface

#As we all know, when the WeChat applet 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 images and large resource files

• Please avoid using large images on the UI of the mini program , you should try your best to decorate your mini program with color styles

• Or, use small and exquisite icons to decorate

• If 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
  

This way you can avoid Pack 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 your code logic , don’t write a lot of very simple logic, please optimize 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 both code size reduction and code performance :)

Use tools to compress and optimize code

In today’s HTML5 In the development and release of Web front-end projects, we usually use some front-end engineering tools to process our code, such as 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 generally have the following types of files that can be optimized using tools:

1, JSONFile

We can use jsonminify to compress JSON files and remove extra spaces in JSON files

2. JavaScript files

Use uglify to optimize the syntax of JS code And text compression

3, WXML file

Using htmlmin, you can clean up excess spaces, comments, etc. in WXML files

4, WXSS file

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

5. Image file

By using imagemin, you can optimize the size of image files

The following is a Gulp script I use myself. For your reference:

package.json

{
 "name": "myproject",
 "version": "1.0.0",
 "description": "my project",
 "author": "Kevin Zhang ",
 "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'])

【Related recommendations 】

1. Download the complete source code of WeChat applet

2. Click the tabbar to change icon

3. WeChat mini program demo: Lezhu

The above is the detailed content of Detailed explanation of optimizing your WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!