Ausführliche Erklärung zur Optimierung Ihres WeChat-Miniprogramms

Dieser Artikel führt Sie hauptsächlich in die relevanten Informationen zum Abnehmen mit dem WeChat-Applet ein. Die Einführung im Artikel ist sehr detailliert und bietet einen gewissen Referenz- und Lernwert für alle Freunde, die sie benötigen.

Vorwort

Wie wir alle wissen, gibt es bei der Veröffentlichung des WeChat-Applets eine Größenbeschränkung von 1 Million für übermittelten Code! Wenn Sie also ein kleines Programm mit einer etwas komplexeren Funktion schreiben, müssen Sie immer sorgfältig darauf achten, ob Ihr Code dieses Endergebnis erreicht.

Zu Beginn des Entwurfs eines kleinen Programms müssen wir uns auf diesen Punkt konzentrieren und einige Methoden anwenden, um zu vermeiden, dass dieses Problem zu früh auftritt.

Vermeiden Sie die Verwendung großer lokaler Bilder und großer Ressourcendateien

• Bitte vermeiden Sie die Verwendung großer Bilder auf der Benutzeroberfläche des Mini Programm Wenn Sie wirklich große Bilder verwenden möchten, fügen Sie die Bilder bitte nicht in den lokalen Code des Miniprogramms ein. Sie sollten die Bilder von einer Remote-URL-Adresse laden

• Auf diese Weise können Sie vermeiden, große Bilder, große Ressourcendateien usw. in das Release-Paket des Miniprogramms zu packen.

• 
  Machen Sie Ihren Code nicht zu ausführlich

Überlegen Sie auf der

JavaScript

-Codeebene sorgfältig Ihre Codelogik Schreiben Sie nicht viel sehr einfache Logik. Bitte optimieren und rationalisieren Sie Ihren Code. Versuchen Sie auf Ansichtsebene, unnötige Verschachtelungen von Komponenten zu vermeiden. Wenn dies mit einer Ansicht möglich ist, fügen Sie keine weitere Ansichtsebene hinzu. Dies ist sowohl für die Reduzierung der Codegröße als auch für die Codeleistung gut :)

Verwenden Sie Tools, um Code zu komprimieren und zu optimieren

In der heutigen Welt

HTML5

Bei der Entwicklung und Veröffentlichung von Web-Front-End-Projekten verwenden wir normalerweise einige Front-End-Engineering-Tools zur Verarbeitung unseres Codes, wie z. B. Gulp, kombiniert mit einigen funktionalen Plug-Ins, wie z. B. uglify, cssnano, htmlmin , usw. Durch die Verwendung dieser Tools kann die Codegröße kleiner werden (ca. 20 % bis 30 %). Glücklicherweise sind diese Tools auch für die Entwicklung kleinerer Programme absolut nützlich! Durch die einfache Verwendung dieser Tools können wir unseren Code so stark reduzieren, warum nicht? !

Im Miniprogramm haben wir ungefähr die folgenden Dateitypen, die mit Tools optimiert werden können:

1,

JSON

Dateien

Wir können jsonminify verwenden, um JSON-Dateien zu komprimieren und zusätzliche Leerzeichen in JSON-Dateien zu entfernen

2. JavaScript-Dateien

Verwenden Sie uglify, um die Syntax von JS-Code zu optimieren und Textkomprimierung

3. WXML-Dateien

Mit htmlmin können Sie überschüssige Leerzeichen, Kommentare usw. in WXML-Dateien bereinigen

4 🎜 >

Sie können die von LESS bereitgestellten Funktionen verwenden, um das globale WXSS im Applet zusammenzuführen; verwenden Sie cssnano, um WXSS-Dateien zu bereinigen und zu komprimieren; verwenden Sie Autoprefixer, um Präfixe in verschiedenen Umgebungen zu WXSS hinzuzufügen, um eine gute Kompatibilität zu erreichen

5. Bilddateien

Durch die Verwendung von imagemin können Sie die Größe von Bilddateien optimieren

Das Folgende ist ein Gulp-Skript, das ich selbst verwende Referenz:

package.json

gulpfile.js

[Verwandte Empfehlungen ]

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

Laden Sie den vollständigen Quellcode des WeChat-Applets herunter

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 Klicken Sie auf das Änderungssymbol in der Tableiste

3.

Demo des WeChat-Miniprogramms: Lezhu

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Optimierung Ihres WeChat-Miniprogramms. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!