WeChat 미니 프로그램 최적화에 대한 자세한 설명

이 기사는 주로 WeChat 애플릿 체중 감량에 대한 관련 정보를 소개합니다. 기사의 소개는 매우 자세하며 필요한 모든 사람을 위한 특정 참고 자료와 학습 가치가 있습니다.

서문

우리 모두 알고 있듯이 WeChat 애플릿이 출시되면 제출 코드 크기가 1M로 제한됩니다! 따라서 약간 더 복잡한 기능을 갖춘 작은 프로그램을 작성하는 경우 코드가 최종 결과에 도달할 것인지 항상 세심한 주의를 기울여야 합니다.

작은 프로그램을 설계하는 초기에는 이 점에 초점을 맞추고 이 문제가 너무 일찍 발생하지 않도록 몇 가지 방법을 채택해야 합니다.

큰 로컬 이미지 및 큰 리소스 파일 사용을 피하세요

• 미니 UI에 큰 이미지 사용을 피하세요. 프로그램 정말 큰 이미지를 사용하려면 미니 프로그램의 로컬 코드에 이미지를 넣지 마십시오.

• 이렇게 하면 큰 사진, 큰 리소스 파일 등을 미니 프로그램의 릴리스 패키지에 넣는 것을 피할 수 있습니다.

• 코드를 너무 장황하게 만들지 마세요
  

JavaScript

코드 수준에서 코드 논리를 신중하게 고려하세요. , 매우 간단한 논리를 많이 작성하지 마십시오. 코드를 최적화하고 간소화하십시오.

뷰 수준에서는 구성요소가 불필요하게 중첩되지 않도록 하세요. 하나의 뷰로 가능하다면 다른 뷰 레이어를 추가하지 마세요. 이는 코드 크기 감소와 코드 성능 모두에 좋습니다 :) 도구를 사용하여 코드 압축 및 최적화

요즘 세상에
HTML5

웹 프런트엔드 프로젝트 개발 및 릴리스에서 우리는 일반적으로 Gulp와 같은 일부 프런트엔드 엔지니어링 도구를 uglify, cssnano, htmlmin과 같은 일부 기능 플러그인과 결합하여 코드를 처리하는 데 사용합니다. , 등. 이러한 도구를 사용하면 코드 크기를 더 작게(약 20%~30%) 만들 수 있습니다.

다행히도 이러한 도구는 소규모 프로그램 개발에도 매우 유용합니다! 이러한 도구를 사용하면 코드를 상당히 줄일 수 있습니다. 왜 안 될까요? ! 미니 프로그램에는 도구를 사용하여 최적화할 수 있는 대략 다음과 같은 유형의 파일이 있습니다:

1, JSON

파일

jsonminify를 사용하여 JSON 파일을 압축하고 JSON 파일에서 추가 공백을 제거할 수 있습니다2. JavaScript 파일

uglify를 사용하여 JS 코드 구문을 최적화합니다. 및 텍스트 압축
3. WXML 파일

htmlmin을 사용하면 WXML 파일에서 불필요한 공백, 주석 등을 정리할 수 있습니다

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 미니 프로그램 최적화에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!