WeChatミニプログラム 100万制限の減量テクニックと方法を詳しく解説

WeChat ミニ プログラムで体重を減らす方法:

ご存知のとおり、WeChat ミニ プログラムがリリースされると、送信されるコードには 1M のサイズ制限があります。したがって、もう少し複雑な関数を含む小さなプログラムを作成している場合は、コードがこの最終ラインに達しようとしているかどうかに常に注意を払う必要があります。

小さなプログラムの設計を開始するときは、この点に焦点を当て、この問題が早期に発生することを避けるためにいくつかの方法を採用する必要があります。

大きなローカル画像や大きなリソースファイルの使用は避けてください

ミニプログラムのUI上での大きな画像の使用はできるだけ避けてください

または、小さくて絶妙な装飾アイコンを使用してください。

本当に大きな画像を使用したい場合は、画像をミニプログラムのローカルコードに入れずに、リモートURLアドレスから画像をロードする必要があります

これにより、大きな画像や大きなリソースファイルのパッケージ化を回避できます。 、など。ミニ プログラムのリリース パッケージに含まれています。

コードを冗長にしすぎないでください。

JavaScript コード レベルで、コードのロジックを慎重に検討してください。コードを最適化して合理化してください。

ビュー レベルでは、コンポーネントの不必要なネストを避けるようにしてください。1 つのビューでそれができる場合は、別のビューのレイヤーを追加しないでください。これは、コード サイズの削減とコードのパフォーマンスの両方に役立ちます:)

コードの圧縮と最適化にはツールを使用します

今日の HTML5 などの Web フロントエンド プロジェクトの開発とリリースでは、通常、何らかのフロント エンド プロジェクトを使用して問題に対処します。 -end エンジニアリング ツール uglify、cssnano、htmlmin などのいくつかの機能プラグインと組み合わせた、Gulp の使用などのコード。これらのツールを使用すると、コード サイズを小さくすることができます (約 20% ～ 30%)。

幸いなことに、これらのツールは小規模なプログラム開発にも完全に役立ちます。これらのツールを使用するだけで、コードを大幅に削減できます。なぜでしょうか? ！

ミニ プログラムには、ツールを使用して最適化できる次の種類のファイルがあります:

JSON ファイル

jsonminify を使用して JSON ファイルを圧縮し、JSON ファイル内の余分なスペースを削除できます

JavaScript ファイル

uglify、JS コードの構文の最適化とテキスト圧縮を実行します

WXML ファイル

htmlmin を使用すると、WXML ファイル内の余分なスペースやコメントなどをクリーンアップできます

WXSS ファイル

LESS が提供する機能を使用して、クリーンアップすることができます小さなプログラムを作成する グローバル WXSS をマージする; cssnano を使用して WXSS ファイルをクリーンアップおよび圧縮する; autoprefixer を使用して異なる環境の WXSS にプレフィックスを追加して、良好な互換性を実現します

画像ファイル

imagemin を使用すると、画像ファイルのサイズを最適化できます

以下は、参考のために私が使用する Gulp スクリプトです:

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

お役に立てば幸いです。ご質問がございましたら、私にメッセージを残していただければ、お答えできるよう最善を尽くします。

その他の WeChat ミニプログラムについては、PHP 中国語 Web サイトに注目してください。減量テクニックと 100 万制限の方法の詳細な説明が記載されています。