Maison > Article > Applet WeChat > 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
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
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
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 :
[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 : LezhuCe 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!