Explication détaillée de l'optimisation de votre mini programme WeChat

Cet article vous présente principalement les informations pertinentes sur la perte de poids de l'applet WeChat. L'introduction dans l'article est très détaillée et a une certaine valeur de référence et d'apprentissage pour tous les amis qui en ont besoin peuvent y jeter un œil ci-dessous.

Avant-propos

Comme nous le savons tous, lorsque l'applet WeChat est publiée, il y a une limite de taille de 1 M pour le code soumis ! Par conséquent, si vous écrivez un petit programme avec une fonction légèrement plus complexe, vous devez toujours faire très attention à savoir si votre code est sur le point d'atteindre ce résultat.

Au début de la conception d'un petit programme, il faut se concentrer sur ce point et adopter quelques méthodes pour éviter de rencontrer ce problème trop tôt.

Évitez d'utiliser de grandes images locales et des fichiers de ressources volumineux

• Veuillez éviter d'utiliser de grandes images sur l'interface utilisateur du mini programme Si vous souhaitez vraiment utiliser de grandes images, veuillez ne pas mettre les images dans le code local du mini programme. Vous devez charger les images à partir d'une adresse URL distante

• De cette façon, vous pouvez éviter de regrouper des images volumineuses, des fichiers de ressources volumineux, etc. dans le package de version du mini-programme.

• Ne rendez pas votre code trop verbeux
  

Au niveau du code

JavaScript

, veuillez examiner attentivement la logique de votre code , n'écrivez pas beaucoup de logique très simple, veuillez optimiser et rationaliser votre code.

Au niveau de la vue, essayez d'éviter l'imbrication inutile de composants. Si vous pouvez le faire avec une seule vue, n'ajoutez pas une autre couche de vues. C'est bon à la fois pour la réduction de la taille du code et pour les performances du code :) Utilisez des outils pour compresser et optimiser le code

Dans le monde d'aujourd'hui
HTML5

Dans le développement et la publication de projets Web front-end, nous utilisons généralement des outils d'ingénierie front-end pour traiter notre code, tels que Gulp, combinés à certains plug-ins fonctionnels, tels que : uglify, cssnano, htmlmin , etc. L'utilisation de ces outils peut réduire la taille de notre code (environ 20 % à 30 %).

Heureusement, ces outils sont également tout à fait utiles pour le développement de petits programmes ! En utilisant simplement ces outils, nous pouvons réduire considérablement notre code, pourquoi pas ? ! Dans le mini programme, nous avons à peu près les types de fichiers suivants qui peuvent être optimisés à l'aide d'outils :

1, JSON

fichiers

Nous pouvons utiliser jsonminify pour compresser les fichiers JSON et supprimer les espaces supplémentaires dans les fichiers JSON2 fichiers JavaScript

Utilisez uglify pour optimiser la syntaxe du code JS. et compression de texte
3. Fichiers WXML

En utilisant htmlmin, vous pouvez nettoyer les espaces excédentaires, les commentaires, etc. dans les fichiers WXML

4. 🎜 >

Vous pouvez utiliser les fonctionnalités fournies par LESS pour fusionner le WXSS global dans l'applet ; utiliser cssnano pour nettoyer et compresser les fichiers WXSS ; utiliser le préfixe automatique pour ajouter des préfixes dans différents environnements à WXSS afin d'obtenir une bonne compatibilité

5. Fichiers image

En utilisant imagemin, vous pouvez optimiser la taille des fichiers image

Ce qui suit est un script Gulp que j'utilise moi-même pour votre. référence :

package.json

gulpfile.js

[Recommandations associées ]

{
 "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"
 }
}

1.

Téléchargez le code source complet de l'applet WeChat

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'])

2 Cliquez sur l'icône de changement de barre d'onglets

3 .

Démo du mini programme WeChat : Lezhu

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!