全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[seo网络服务公司]详解优化你的微信小程序

  这篇文章主要给大家介绍了关于微信小程序瘦身的相关资料●☆□■,文中介绍的非常详细,对大家具有一定的参考学习价值…▲,广西壮族自治区小程序制作公司需要的朋友们下面来一起看看吧。[优化网站seo公司]PHP7.1-soap扩展安装方法

  前言

  众所周知,微信小程序在发布的时候,对提交的代码有1M大小的限制!所以,如果你正在写一个功能稍微复杂一点的小程序,就必须得时刻小心注意你的代码是不是快触及这个底线了。

  在设计一个小程序之初◆◆△…,我们就需要重点考虑这一点◁■○,采取一些方法,来避免太早的遭遇这个问题-▪…。

  避免使用本地大图片●▪■○、大资源文件

  

  •  

      请避免在小程序的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文件中多余的空格•□,[seo网络服务公司]注释等进行清理

  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({
 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. 微信小程序完整源码下载

  2. 点击tabbar变换图标

  3. 微信小程序demo:乐助

  以上就是详解优化你的微信小程序的详细内容▼●,更多请关注久澳传媒编程栏目其它相关文章!

[seo网络服务公司]详解优化你的微信小程序

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。