WeChat Mini Program Explication détaillée des techniques et méthodes de perte de poids avec une limite de 1M

Méthodes pour perdre du poids avec les programmes WeChat Mini :

Comme nous le savons tous, lorsque le programme WeChat Mini est publié, 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. Essayez de décorer votre mini-programme avec des styles de couleurs autant que possible

.

Ou utilisez de petites icônes exquises pour l'embellir

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 depuis. une adresse URL distante. Méthode

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 simple et veuillez l'optimiser. rationalisez 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 pour réduire la taille du code et les performances du code :)

Utiliser des outils pour compresser et optimiser le code

Dans le développement et la publication de projets front-end Web tels que HTML5 aujourd'hui, nous utilisons généralement Certains outils d'ingénierie front-end sont utilisés pour traiter notre code, comme l'utilisation de Gulp, combiné à 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 :

Fichiers JSON

Nous pouvons utiliser jsonminify pour compresser les fichiers JSON, allez vers JSON Espaces supplémentaires dans le fichier

Fichier JavaScript

Utilisez uglify pour optimiser la syntaxe et la compression du texte du code JS

Fichier WXML

Utilisez htmlmin pour nettoyer supprimer les espaces excédentaires, les commentaires, etc. dans les fichiers WXML

Fichiers WXSS

Vous pouvez utiliser les fonctionnalités fournies par LESS pour fusionner le WXSS global dans le mini-programme ; utiliser cssnano pour le nettoyage et la compression ; utilisez le préfixe automatique pour ajouter des préfixes dans différents environnements à WXSS afin d'obtenir une bonne compatibilité

Fichier image

En utilisant imagemin, il peut être utilisé pour optimiser la taille des fichiers image

Le Voici un script Gulp que j'utilise pour votre référence :

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

J'espère que cela vous a aidé. Si vous rencontrez des questions, vous pouvez me laisser un message et je ferai de mon mieux pour vous aider à y répondre.

Pour plus de mini-programmes WeChat et des explications détaillées sur les techniques et méthodes de perte de poids avec une limite de 1 million, veuillez faire attention au site Web PHP chinois pour les articles connexes !