WeChat Mini-Programm Detaillierte Erläuterung der Techniken und Methoden zur Gewichtsreduktion mit einem Limit von 1 Mio

Methoden zum Abnehmen mit WeChat Mini-Programmen:

Wie wir alle wissen, gilt bei Veröffentlichung des WeChat Mini-Programms eine Größenbeschränkung von 1 Million für den ü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 Miniprogramms. Versuchen Sie, Ihr Miniprogramm so weit wie möglich mit Farbstilen zu dekorieren.

Oder verwenden Sie kleine und exquisite Symbole, um es zu verschönern

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 laden eine Remote-URL-Adresse. Methode

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 Ebene des JavaScript-Codes sorgfältig, dass Sie nicht viel einfache Logik schreiben möchten Optimieren Sie Ihren Code.

Versuchen Sie auf Ansichtsebene, unnötige Verschachtelungen von Komponenten zu vermeiden. Wenn Sie dies mit einer Ansicht tun können, fügen Sie keine weitere Ansichtsebene hinzu. Dies ist gut, um die Codegröße und die Codeleistung zu reduzieren :)

Verwenden Sie Tools zum Komprimieren und Optimieren von Code

Bei der Entwicklung und Veröffentlichung von Web-Frontend-Projekten wie HTML5 verwenden wir heute normalerweise Zur Verarbeitung unseres Codes werden einige Front-End-Engineering-Tools verwendet, z. B. Gulp, kombiniert mit einigen funktionalen Plug-Ins, 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:

JSON-Dateien

Wir können jsonminify verwenden, um JSON-Dateien zu komprimieren, los zu JSON Zusätzliche Leerzeichen in der Datei

JavaScript-Datei

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

WXML-Datei

Verwenden Sie htmlmin zum Bereinigen Überschüssige Leerzeichen, Kommentare usw. in WXML-Dateien entfernen

WXSS-Dateien

Sie können die von LESS bereitgestellten Funktionen verwenden, um globales WXSS im Miniprogramm zusammenzuführen; verwenden Sie cssnano zum Bereinigen und Komprimieren; Verwenden Sie Autoprefixer, um in verschiedenen Umgebungen Präfixe zu WXSS hinzuzufügen, um eine gute Kompatibilität zu erreichen.

Bilddatei

Durch die Verwendung von imagemin kann es zur Optimierung der Größe von Bilddateien verwendet werden Das Folgende ist ein Gulp-Skript, das ich als Referenz verwende:

package.json

gulpfile.js

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

Ich hoffe, es hilft Ihnen. Wenn Sie Fragen haben, können Sie mir eine Nachricht hinterlassen und ich werde mein Bestes tun, um Ihnen bei der Beantwortung zu helfen.

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

Weitere WeChat-Miniprogramme und detaillierte Erklärungen zu Techniken und Methoden zur Gewichtsreduktion mit einem Limit von 1 Million finden Sie auf der chinesischen PHP-Website für verwandte Artikel!