WeChat ミニ プログラムの最適化に関する詳細な説明

この記事では、主に減量のための WeChat ミニ プログラムに関する関連情報を紹介します。記事内の紹介は非常に詳細であり、必要な友人は以下を参照してください。

前書き

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

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

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

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

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

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

  。

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

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

JavaScriptのコードレベルでは、コードロジックを慎重に検討し、非常に単純なロジックをたくさん書かず、コードを最適化して合理化してください。
ビュー レベルでは、コンポーネントの不必要なネストを避けるようにしてください。1 つのビューでそれができる場合は、ビューの別のレイヤーを追加しないでください。これは、コード サイズの削減とコードのパフォーマンスの両方に役立ちます:)

ツールを使用してコードを圧縮し、最適化します

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

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

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

1、JSONfiles

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

2. JavaScript ファイル

uglify を使用して JS コードの構文とテキスト圧縮を最適化します

3. WXML ファイル

WXSS ファイル内の余分なスペースやコメントなどをクリーンアップします

4.

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

5. 画像ファイル

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

【関連おすすめ】

1. WeChat ミニ プログラムの完全なソース コードのダウンロード

2. タブバーをクリックしてアイコンを変更します

3. WeChat ミニ プログラムのデモ: Lezhu

以上がWeChat ミニ プログラムの最適化に関する詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。