这篇文章主要给大家介绍了关于微信小程序瘦身的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
前言
众所周知，微信小程序在发布的时候，对提交的代码有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文件中多余的空格，注释等进行清理
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( #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;])
【相关推荐】
1. 微信小程序完整源码下载
2. 点击tabbar变换图标
3. 微信小程序demo：乐助
以上就是详解优化你的微信小程序的详细内容，更多请关注php中文网其它相关文章！
微信app下载
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！
浙公网安备33010502012046号