温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何优化微信小程序

发布时间:2021-07-05 11:13:32 阅读:165 作者:小新 栏目:web开发
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

小编给大家分享一下如何优化微信小程序,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

避免使用本地大图片、大资源文件

  • 请避免在小程序的UI上使用大图片,应该尽可能的通过颜色样式来装点你的小程序

  • 或者,使用小而精致的小图标来点缀

  • 如果实在想用大图片,那请不要将图片放进小程序的本地代码中,应该采用从一个远程URL地址加载图片的方式

这样就可以避免把大图片、大资源文件等打包进小程序的发布包中去了。

不要让你的代码太啰嗦

在JavaScript代码层面,请审慎的考虑你的代码逻辑,不要把一个很简单的逻辑洋洋洒洒的写了一大堆,请优化和精简你的代码。
在视图层面,尽量避免不必要的组件嵌套,能用一个view做到的,就不要再多套一层view。这对减少代码尺寸和代码性能都是有好处的:)

使用工具压缩优化代码

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

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

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

1、JSON文件

我们可以使用jsonminify来压缩JSON文件,去处JSON文件中多余的空格

2、JavaScript文件

使用uglify,对JS代码进行语法优化和文本压缩

3、WXML文件

使用htmlmin,可以对WXML文件中多余的空格,注释等进行清理

4、WXSS文件

可以使用LESS提供的特性,对小程序中的全局WXSS进行合并;使用cssnano对WXSS文件进行清理和压缩;使用autoprefixer对WXSS添加不同环境下的前缀,达到良好的兼容性

5、Image文件

通过使用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({
 collapseWhitespacetrue,
 removeCommentstrue,
 keepClosingSlashtrue
 })))
 .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'])

以上是“如何优化微信小程序”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×