小程序体积大于2M不能上传和预览,怎么处理

小程序上传和预览时,体积大于2040KB,会报错,不能上传和预览,

总结解决办法如下 


1.将小程序中的图片,尽量替换成云存储路径

   尽量不要存在本地(除了icon和tab图标这种很小的图片)


2.不要在本地CSS中引用图标路径,本地CSS文件中需要转换成base64格式,超长一串字符相当占用空间


3.采用pages目录分包,具体分包方法网上已经有很多,在此不再赘述


4.不要让你的代码太啰嗦

在 JavaScript 代码层面,请审慎的考虑你的代码逻辑。不要把一个很简单的逻辑洋洋洒洒的写了一大堆,请优化和精简你的代码。

在视图层面,尽量避免不必要的组件嵌套,能用一个 view 做到的,就不要再多套一层 view。这对减少代码尺寸和代码性能都是有好处的。


5.使用工具压缩优化代码

在当今 HTML5 等 Web 前端项目的开发和发布中,我们通常会通过使用一些前端工程化工具来处理我们的代码,比如使用 Gulp,结合一些功能插件,如:Uglify、CSS Nano、HTML min 等。使用这些工具,可以让我们的代码尺寸小上那么一大截(大约 20%~30%)。

而幸运的是,这些工具对小程序开发来说,也完全管用!通过简单的使用这些工具,就能让我们的代码减小那么多,何乐而不为呢。

在小程序中,我们大致有这么几类可以使用工具进行优化的文件:

  • JSON 文件:我们可以使用 JSON minify 来压缩 JSON 文件,去除 JSON 文件中多余的空格
  • JavaScript 文件:使用uglify,对 JS 代码进行语法优化和文本压缩
  • WXML 文件:使用htmlmin,可以对 WXML 文件中多余的空格,注释等进行清理
  • WXSS 文件:可以使用 LESS 提供的特性,对小程序中的全局 WXSS 进行合并;使用 CSS Nano 对 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'])

     

 

上一篇:AcWing 799. 最长连续不重复子序列 双指针(一般先写一个朴素暴力的做法,然后看两个指针直接是否存在单调关系,如果存在,就想方法优化)


下一篇:gulp使用简要记录