如何为你的微信小程序体积瘦身?

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

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

避免使用本地大图片、大资源文件
  • 请避免在小程序的UI上使用大图片,应该尽可能的通过颜色样式来装点你的小程序
  • 或者,使用小而精致的小图标来点缀
  • 如果实在想用大图片,那请不要将图片放进小程序的本地代码中,应该采用从一个远程URL地址加载图片的方式

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

不要让你的代码太啰嗦

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

使用工具压缩优化代码

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

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

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

    • JSON文件
      我们可以使用jsonminify来压缩JSON文件,去处JSON文件中多余的空格
    • JavaScript文件
      使用uglify,对JS代码进行语法优化和文本压缩
    • WXML文件
      使用htmlmin,可以对WXML文件中多余的空格,注释等进行清理
    • WXSS文件
      可以使用LESS提供的特性,对小程序中的全局WXSS进行合并;使用cssnano对WXSS文件进行清理和压缩;使用autoprefixer对WXSS添加不同环境下的前缀,达到良好的兼容性
    • Image文件
      通过使用imagemin,可以用来优化图片文件的大小
    • 「H5程序俱乐部」是一个专注微信小程序学习交流,相关外包/招聘需求信息发布的微信公众号 
时间: 2024-10-18 01:43:06

如何为你的微信小程序体积瘦身?的相关文章

微信小程序_微信小程序开发,小程序源码、案例、教程

原文地址:http://whosmall.com/?post=448 本文标签: 微信小程序 小程序源码案例 小程序项目 小程序源码 微信小程序教程 什么是微信小程序? 微信小程序是微信基于微信平台的一个应用发布平台,微信小程序app开发属于原生app组件提供js接口的开发方式,比混合是app的用户体验更好,仅次于原生应用. 不过微信小程序定位于小,要符合轻量易用无需下载,所以从体积上也是有限制,整个小程序应用体积不能超过1M. 微信小程序的应用场景? 微信小程序的应用场景适用于轻量应用,非强交

微信小程序与传统APP十大优劣对比

随着微信公众平台的开放,微信端小程序涌现市场,带来很很多便利和简单的原生操作,询:微信端小程序是否会替代传统的APP应用?两者的优劣如何?我们一起来看看传统APP与微信端小程序十大优劣对比       微信正让60%的APP变得没有存在价值,这个观点是从价值层面来谈的,以我们和传统企业合作实践的经验来看,从功能层面来看,未来,80%的传统APP将会被微信端小程序所代替.         APP作为用户接入移动互联网世界的桥梁和入口,研究APP,对于传统商家实现移动营销具有重要的价值.下面,从开发

1万字!彻底看懂微信小程序

Q:为什么说小程序如炮友? A:小程序刚发布不久就流行一个段子:APP如原配,一年不用几次:服务号如情人,一个月固定几次:订阅号如酒店小卡片,天天可以卖广告:小程序像炮友,用完就走. 资本如嫖客,各个平台和垂直类掠夺者已经瓜分掉了线上流量,那么未来争夺的流量战场必然在实体场景,很多巨头其实已经证明了线下流量庞大的潜力.在快递包裹上印上自己的二维码关注公众号形成二次寄出快递的粘性,PokemonGo让用户在实体地图上捕获小精灵. 未来的入口不限于二维码,而是一切的富媒体.二维码之于2D识别,复杂图

微信小程序:开发之前要知道的三件事

前言 微信之父张小龙在年初的那次演讲中曾表示:"我自己是很多年的程序员,我觉得我们应该为开发的团队做一些事情".几个月后,微信正式推出微信应用号(即微信小程序),在互联网中掀起了又一波热潮. 于是,很多人准备要开发微信的小程序,如果你真的想要开发小程序,就要先学会一套微信特制的"开发语言".为了更好地上手这门开发语言,下面这三件事你一定要知道: 语言与文件 微信小程序来发与其他平台开发的最大差异在于:微信使用的开发语言和文件很"个性". 小程序所

微信小程序代码片段

微信小程序代码片段是一种可分享的小项目,可用于分享小程序和小游戏的开发经验.展示组件和 API 的使用.复现开发问题等等.分享代码片段会得到一个链接,所有拥有此分享链接的人可以在工具中导入此代码片段.如果网页可点击的链接指向的是分享链接,那么点击链接也会自动打开工具进入代码片段导入页. 创建代码片段 在工具选择项目的界面中,右侧可以选择代码片段页卡,查看所有本地代码片段,在右下角可以点击创建代码片段. 创建代码片段需要填入代码片段名称.本地存放目录.AppID 不是必填项,如果需要演示依赖 Ap

wx-charts 微信小程序图表插件

阅读数:9460 微信小程序图表插件(wx-charts)基于canvas绘制,体积小巧,支持图表类型饼图.线图.柱状图 .区域图等图表图形绘制,目前wx-charts是微信小程序图表插件中比较强大好使的一个 支持图标类型 饼图 pie 圆环图 ring 线图 line 柱状图 column 区域图 area 雷达图 radar 如何使用? 直接引用编译好的文件 dist/charts.js(js下载地址) .wxml中定义 <canvas canvas-id="lineCanvas&qu

微信小程序与传统APP大比拼

2016年1月11日,微信之父张小龙公开表态,未来两年,80%的APP市场将被小程序取代.市场竞争日益剧增,一场移动互联网的"革命"正在拉开序幕.过去人们买手机都会考虑一个重要问题,那就是内存,总会选择买大内存的手机,因为手机里总会装着各种不同类型的APP软件.随着微信小程序的崛起,APP受到了不小的冲击后,而内存的问题迎刃而解不再是困扰大家的决定了. 随着微信公众平台的开放,微信端小程序涌现市场,带来很很多便利和简单的原生操作,很多吃瓜的朋友想问,未来微信端小程序是否会替代传统的AP

全栈开发工程师微信小程序-中(中)

开放能力 open-data 用于展示微信开放的数据 type 开放数据类型 open-gid 当 type="groupName" 时生效, 群id lang 当 type="user*" 时生效,以哪种语言展示 userInfo <open-data type="groupName" open-gid="xxxxxx"></open-data> <open-data type="us

微信小程序图表组件 wx-f2

摘自 杀个程序猿祭天  https://www.jianshu.com/p/6b9fe45f799f Github地址:https://github.com/antvis/wx-f2 AntV F2地址: AntV F2 微信小程序图表组件 wx-f2,源于 F2,专为移动而生 F2,专为移动而生的可视化解决方案,特为大家提供了微信小程序端版本,体积小巧,性能卓越,底层基于图形语法,可以提供非常丰富的图表类型. 可以使用微信扫描以下二维码先体验一番: image wx-f2 F2 的微信小程序版