WeChat Mini 프로그램 1M 제한 체중 감량 기술 및 방법에 대한 자세한 설명

WeChat Mini 프로그램으로 다이어트하는 방법:

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

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

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

미니 프로그램의 UI에 큰 이미지를 사용하지 마세요. 미니 프로그램을 컬러 스타일로 최대한 꾸며보세요

또는 작고 정교한 아이콘을 사용하여 꾸미세요

정말 큰 사진을 사용하고 싶다면 미니 프로그램의 로컬 코드에 사진을 넣지 마세요. 원격 URL 주소. 방법

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

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

JavaScript 코드 수준에서 코드의 로직을 신중하게 고려하여 간단한 로직을 많이 작성하지 마세요. 코드를 간소화하세요.

뷰 수준에서 불필요한 구성 요소 중첩을 피하세요. 하나의 뷰로 가능하다면 다른 뷰 레이어를 추가하지 마세요. 이는 코드 크기를 줄이고 코드 성능을 높이는 데 좋습니다 :)

도구를 사용하여 코드를 압축하고 최적화

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

다행히도 이러한 도구는 소규모 프로그램 개발에도 매우 유용합니다! 이러한 도구를 사용하면 코드를 상당히 줄일 수 있습니다. 왜 안 될까요? !

미니 프로그램에는 도구를 사용하여 최적화할 수 있는 대략 다음과 같은 유형의 파일이 있습니다.

JSON 파일

jsonminify를 사용하여 JSON 파일을 압축할 수 있습니다. JSON으로 파일에 추가 공백

JavaScript 파일

uglify를 사용하여 JS 코드의 구문 및 텍스트 압축 최적화

WXML 파일

htmlmin을 사용하여 정리 WXML 파일에서 초과 공백, 주석 등을 제거합니다

WXSS 파일

LESS에서 제공하는 기능을 사용하여 미니 프로그램에서 전역 WXSS를 병합할 수 있습니다. cssnano를 사용하여 정리하고 압축할 수 있습니다. 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 미니 프로그램과 1M 제한 체중 감량 기술 및 방법에 대한 자세한 설명을 보려면 PHP 중국어 웹사이트에서 관련 기사를 주목하세요!