> 위챗 애플릿 > 미니 프로그램 개발 > WeChat Mini 프로그램 1M 제한 체중 감량 기술 및 방법에 대한 자세한 설명

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

高洛峰
풀어 주다: 2017-01-10 10:04:27
원래의
3096명이 탐색했습니다.

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(&#39;gulp&#39;)
const del = require(&#39;del&#39;)
const runSequence = require(&#39;run-sequence&#39;)
const autoprefixer = require(&#39;autoprefixer&#39;)
const $ = require(&#39;gulp-load-plugins&#39;)()
 
let prod = false
 
// -------------------- Clean --------------------------
 
gulp.task(&#39;clean&#39;, () => {
 return del([&#39;./dist/**&#39;])
})
 
// -------------------- Lint ---------------------------
 
gulp.task(&#39;eslint&#39;, () => {
 return gulp.src([&#39;./src/**/*.js&#39;])
  .pipe($.eslint())
  .pipe($.eslint.format())
  .pipe($.eslint.failAfterError())
})
 
gulp.task(&#39;jsonlint&#39;, () => {
 return gulp.src([&#39;./src/**/*.json&#39;])
  .pipe($.jsonlint())
  .pipe($.jsonlint.reporter())
  .pipe($.jsonlint.failAfterError())
})
 
// -------------------- JSON ---------------------------
 
gulp.task(&#39;json&#39;, [&#39;jsonlint&#39;], () => {
 return gulp.src(&#39;./src/**/*.json&#39;)
  .pipe($.if(prod, $.jsonminify()))
  .pipe(gulp.dest(&#39;./dist&#39;))
})
 
gulp.task(&#39;json:watch&#39;, () => {
 gulp.watch(&#39;./src/**/*.json&#39;, [&#39;json&#39;])
})
 
// -------------------- Assets --------------------------
 
gulp.task(&#39;assets&#39;, () => {
 return gulp.src(&#39;./src/assets/**&#39;)
  .pipe(gulp.dest(&#39;./dist/assets&#39;))
})
 
gulp.task(&#39;assets:watch&#39;, () => {
 gulp.watch(&#39;./src/assets/**&#39;, [&#39;assets&#39;])
})
 
// -------------------- WXML -----------------------------
 
gulp.task(&#39;templates&#39;, () => {
 return gulp.src(&#39;./src/**/*.wxml&#39;)
  .pipe($.if(prod, $.htmlmin({
   collapseWhitespace: true,
   removeComments: true,
   keepClosingSlash: true
  })))
  .pipe(gulp.dest(&#39;./dist&#39;))
})
 
gulp.task(&#39;templates:watch&#39;, () => {
 gulp.watch(&#39;./src/**/*.wxml&#39;, [&#39;templates&#39;])
})
 
// -------------------- WXSS ------------------------------
 
gulp.task(&#39;styles&#39;, () => {
 return gulp.src([&#39;./src/**/*.wxss&#39;, &#39;!./src/styles/**&#39;])
  .pipe($.less())
  .pipe($.postcss([
   autoprefixer([
    &#39;iOS >= 8&#39;,
    &#39;Android >= 4.1&#39;
   ])
  ]))
  .pipe($.if(prod, $.cssnano()))
  .pipe($.rename((path) => path.extname = &#39;.wxss&#39;))
  .pipe(gulp.dest(&#39;./dist&#39;))
})
 
gulp.task(&#39;styles:watch&#39;, () => {
 gulp.watch(&#39;./src/**/*.wxss&#39;, [&#39;styles&#39;])
})
 
// -------------------- JS --------------------------------
 
gulp.task(&#39;scripts&#39;, [&#39;eslint&#39;], () => {
 return gulp.src(&#39;./src/**/*.js&#39;)
  .pipe($.babel())
  .pipe($.if(prod, $.uglify()))
  .pipe(gulp.dest(&#39;./dist&#39;))
})
 
gulp.task(&#39;scripts:watch&#39;, () => {
 gulp.watch(&#39;./src/**/*.js&#39;, [&#39;scripts&#39;])
})
 
// ---------------------------------------------------------
 
gulp.task(&#39;build&#39;, [
 &#39;json&#39;,
 &#39;assets&#39;,
 &#39;templates&#39;,
 &#39;styles&#39;,
 &#39;scripts&#39;
])
 
gulp.task(&#39;watch&#39;, [
 &#39;json:watch&#39;,
 &#39;assets:watch&#39;,
 &#39;templates:watch&#39;,
 &#39;styles:watch&#39;,
 &#39;scripts:watch&#39;
])
 
gulp.task(&#39;build:clean&#39;, (callback) => {
 runSequence(&#39;clean&#39;, &#39;build&#39;, callback)
})
 
gulp.task(&#39;watch:clean&#39;, (callback) => {
 runSequence(&#39;build:clean&#39;, &#39;watch&#39;, callback)
})
 
gulp.task(&#39;build:prod&#39;, (callback) => {
 prod = true
 runSequence(&#39;build:clean&#39;, callback)
})
 
gulp.task(&#39;default&#39;, [&#39;watch:clean&#39;])
로그인 후 복사

도움이 되었기를 바랍니다. 질문이 있으시면 저에게 메시지를 남겨주시면 최선을 다해 답변해 드리겠습니다.

더 많은 WeChat 미니 프로그램과 1M 제한 체중 감량 기술 및 방법에 대한 자세한 설명을 보려면 PHP 중국어 웹사이트에서 관련 기사를 주목하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿