如何为你的微信小程序体积瘦身?
众所周知,微信小程序在发布的时候,对提交的代码有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程序俱乐部」是一个专注微信小程序学习交流,相关外包/招聘需求信息发布的微信公众号
如何为你的微信小程序体积瘦身?的更多相关文章
- 微信小程序开源
| UI组件 | | | | | | | | | weui-wxss ★1873 - 同微信原生视觉体验一致的基础样式库 | | | | | | zanui-weapp ★794 - 好用易扩展的小程 ...
- 微信小程序与传统APP十大优劣对比
随着微信公众平台的开放,微信端小程序涌现市场,带来很很多便利和简单的原生操作,询:微信端小程序是否会替代传统的APP应用?两者的优劣如何?我们一起来看看传统APP与微信端小程序十大优劣对比 ...
- 微信小程序全面实战,架构设计 && 躲坑攻略(小程序入门捷径教程)
最近集中开发了两款微信小程序,分别是好奇心日历(每天一条辞典+一个小投票)和好奇心日报(轻量版),直接上图: Paste_Image.png 本文将结合具体的实战经验,主要介绍微信小程序的基础知识.开 ...
- 微信小程序:开发之前要知道的三件事
前言 微信之父张小龙在年初的那次演讲中曾表示:"我自己是很多年的程序员,我觉得我们应该为开发的团队做一些事情".几个月后,微信正式推出微信应用号(即微信小程序),在互联网中掀起了又 ...
- 微信小程序开闸,关于入口、推广、场景的一些观察与思考
今夜(1月9号)零点,微信小程序正式上线.在体验了很多款小程序后,我对小程序的使用场景有了更多的认识.以下是一些想法,欢迎交流. 一.小程序的"入口"在哪儿? 1.只有访问过的小程 ...
- 使用mpvue开发微信小程序
更多内容请查看 我的新博客 地址 : 前言 16年小程序刚出来的时候,就准备花点时间去学学.无奈现实中手上项目太多,一个接着一个,而且也没有开发小程序的需求,所以就一拖再拖. 直到上周,终于有一个小程 ...
- 微信小程序开发06-一个业务页面的完成
前言 接上文:微信小程序开发05-日历组件的实现 github地址:https://github.com/yexiaochai/wxdemo 这里来说一说我们的理念,我们也学习小程序开发有一周多了,从 ...
- android上instant app介绍 类似于微信小程序
android上instant app介绍 类似于微信小程序instant app 是谷歌推出的类似于微信小程序(或者说小程序类似于instant app)的一项技术,用户无须安装应用,用完就走,同时 ...
- 腾讯技术分享:微信小程序音视频技术背后的故事
1.引言 微信小程序自2017年1月9日正式对外公布以来,越来越受到关注和重视,小程序上的各种技术体验也越来越丰富.而音视频作为高速移动网络时代下增长最快的应用形式之一,在微信小程序中也当然不能错过. ...
随机推荐
- win10 环境 gitbash 显示中文乱码问题处理
gitbash 是 windows 环境下非常好用的命令行终端,可以模拟一下linux下的命令如ls / mkdir 等等,如果使用过程中遇到中文显示不完整或乱码的情况,多半是因为编码问题导致的,修改 ...
- jsp前端实现分页代码
前端需要订一page类包装,其参数为 private Integer pageSize=10; //每页记录条数=10 private Integer totalCount; //总记录条数 priv ...
- PC分配盘符的时候发现==》RPC盘符不可用
服务器汇总:http://www.cnblogs.com/dunitian/p/4822808.html#iis 服务器异常: http://www.cnblogs.com/dunitian/p/45 ...
- Nhibernate的Session管理
参考:http://www.cnblogs.com/renrenqq/archive/2006/08/04/467688.html 但这个方法还不能解决Session缓存问题,由于创建Session需 ...
- 从零开始编写自己的C#框架(28)——建模、架构与框架
文章写到这里,我一直在犹豫是继续写针对中小型框架的设计还是写些框架设计上的进阶方面的内容?对于中小型系统来说,只要将前面的内容进行一下细化,写上二三十章具体开发上的细节,来说明这个通用框架怎么开发的就 ...
- [转]Patch文件结构详解
N久不来 于是不知道扔在哪儿于是放这里先 如果你觉得碍事的话 帮我扔到合适的版块去.. 导读这是一篇说明文 它介绍了标准冒险岛更新文件(*.patch;*.exe)的格式文章的最后附了一段C#的参考代 ...
- 【C#公共帮助类】 Utils 10年代码,最全的系统帮助类
为大家分享一下个人的一个Utils系统帮助类,可能有些现在有新的技术替代,自行修改哈~ 这个帮助类主要包含:对象转换处理 .分割字符串.截取字符串.删除最后结尾的一个逗号. 删除最后结尾的指定字符后的 ...
- ecshop验证码
<?php //仿制ecshop验证码(四位大写字母和数字.背景) //处理码值(四位大写字母和数字组成) //所有的可能的字符集合 $chars = 'ABCDEFGHIJKLMNOPQRST ...
- 15个C++项目列表
实验楼上有很多C++的实战项目,从简单到进阶,学习每个项目都可以掌握相应的知识点. 如果你还是C++新手的话,那么这个C++的项目列表你可以拿去练手实战开发,毕竟学编程动手实践是少不了的! 如果你不知 ...
- 在redis中使用lua脚本让你的灵活性提高5个逼格
在redis的官网上洋洋洒洒的大概提供了200多个命令,貌似看起来很多,但是这些都是别人预先给你定义好的,但你却不能按照自己的意图进行定制, 所以是不是感觉自己还是有一种被束缚的感觉,有这个感觉就对了 ...