文档章节

微信小程序压缩实践

第九程序
 第九程序
发布于 2017/07/05 09:39
字数 2460
阅读 159
收藏 5
点赞 0
评论 0

微信小程序依靠微信巨大的用户流量优势,吸引来了众多第三方开发者。几乎每个公司都会想通过小程序拉到新的用户群体。3月份接到公司任务,需要将公司各业务线小程序整合到一个小程序中。但摆在面前的问题是空间完全不够。当时微信小程序的使用空间是 1024KB(现在已升为 2M),各个业务线独立的小程序都不小,『机票火车票汽车票』小程序更是超过 900KB。如何整合和压缩才能使 size 达标,成了最大的挑战。

我们经过考虑,准备从两个方面进行整合和压缩,一是通过工程化的方式实现代码复用——提取公共业务逻辑,公共组件;二是通过工具进行自定义化代码打包压缩处理。

工程规范制定

为了节省开发时间,我们尽量整合现有业务线小程序代码,减少业务改动。

目录结构

同时为了后期计算各业务占用空间情况方便,我们直接将各业务线小程序工程代码拷贝到各自业务线目录下,最终的目录结构如下:

.
├── common # 通用模块/公共业务
├── home   # 首页
├── flight # 机票
├── train  # 火车票
├── bus    # 汽车票
├── hotel  # 酒店
└── ticket # 门票

common 模块即工程的复用部分,具体业务代码都在各自目录下。总体架构如下:

公共组件、API

微信小程序其实并没有提供组件化开发的方式。只是提供了 template 的方式,所以我们只提供了为数不多的页面及组件,例如:城市定位、日历组件等。但是收益却是非常明显的,像这些页面大小都在 20KB~30KB,如果每个业务自己整一套可能将徒增上百 KB 代码。

公共 API 我们提供了统一的 Watcher 监控、 Requester 请求、 Loading 加载转态、 Navigation 导航等。这些公共逻辑的抽取,为整个项目整合节省了巨大的空间,使 size 达标看起来不那么难了。

工程复用上节省了很大一部分空间。但是空间是有限的,业务需求是无限的。而且,size 的大小会影响用户加载的速度,包括下载最新版本代码的速度和小程序初始化的速度,所以还需要进一步进行代码压缩。

打包压缩工具

微信开发者工具

我们知道微信小程序开发者工具本身提供了『代码压缩上传』功能。

但是个人觉得它是个『假的压缩选项』。因为在阅读开发者工具的源码逻辑之后,发现它的压缩,只是将 JavaScript 用 uglify 进行混淆压缩。而对 WXML、WXSS 没有进行任何压缩处理。同时,对资源路径中的无用文件也没有做处理。

小程序的构建

在小程序开发者工具的 Sources 面板,查看 JavaScript 脚本,会发现:项目中所有的 JavaScript 都会被 同步加载 ,不管是否被 require 。

每个脚本都会被套上如下代码:

define("some.js", function(require,module){
    // 原本的代码
});

这种加载方式类似 AMD,但是跟标准的 AMD 又有些不同,缺少了依赖部分的声明。

而对于 WXSS 和 WXML 文件,则被开发者工具自动转换为 JavaScript 后加载,其中:

WXSS:主要处理的是 import 逻辑,然后生成的 CSS,通过脚本的形式插入页面使用。

WXML:类似于 React Naitive 的 JSX,被编译成 createElement 类似的形式。

一些技巧

在 MacOS 系统中,右键开发者工具『Show Contents』(显示包内容),就能在 Resources/app.nw/ 下找到相应的源码,完成路径如下: /Applications/wechatwebdevtools.app/Contents/Resources/app.nw/ 。

源码都是压缩过后的 JavaScript 脚本,可以使用 js-beautity 进行格式化,以便于阅读。

// 在源码目录的 app 目录下执行
find . -type f -name '*.js' -exec js-beautify -r -s 2 -p -f '{}' \;
  • 在资源目录下: app/dist/app.js 的第 37 行 window.addEventListener("resize", function() {}) 之前,加入 nw.Window.get().showDevTools(); 。之后每次打开微信开发者工具时,会自动启动针对『开发者工具』的开发者工具,并可以通过它调试微信的开发者工具。

  • 在打印日志时,不要用 console.log ,请使用 global.contentWindow.console.log 。这样,才能输出到上面所说的开发者工具的开发者工具的控制台里。(NW.js 的 Node JS Context 和 Webkit JS Context 是分开的, JavaScript 脚本运行在 Node 的 JS Context 中,因此,打印其实打印在 Node 的输出中,并不在 Webkit 的开发者工具的控制台中。 global.contentWindow 获取的是 Webkit 的 JS Context 里的 Window)

使用这两点技巧,读者们可以优雅地去阅读微信开发者工具的源码了。

在阅读源码,知道微信小程序的内部加载构建方式之后,我们可以针对性的对 JavaScript、WXML、WXSS 等代码文件进行打包压缩。

压缩 JavaScript

由于微信只是将 js 进行了混淆压缩,并没有打包合并成一个文件。所以我们提供了打包压缩工具将 js 文件合并压缩成一个 bundle.js 文件。合并成一个文件有以下好处:

  • require 的长路径没了,脚本压缩效率变高
  • 代码合并在一起,混淆性越大
  • 文件合并,减少了 IO 次数,提升了加载效率

上文说了 JavaScript 都会被同步加载,所以不用担心打包成一个文件后会延长小程序加载时间。

那么打包压缩工具具体做了什么工作呢?

  1. 小程序有一个统一的入口是 app.js ,而每个页面都有自己的入口 page.js
  2. 利用 AST,将 page.js 里页面注册 Page(pageOpt) 代码改成 global.YPage(pageName, pageIndex)(pageOpt)

    pageName 页面路由

    pageIndex 是打包工具根据页面路由内部自动维护的

    // global.YPage 函数
    global.YPage = (pageName, index)=> {
        return (pageOpt) => {
            // 其他处理逻辑
            global['p' + index] = ()=> {
                Page(pageOpt);
            }
        }
    }

    这样 page.js 里实际是这样的代码

    global['p' + index] = ()=> {
           Page(pageOpt);
    }

    这样并不会执行 Page(pageOpt) ,页面也没注册啊。这就是要达到的目的,继续往后看。

  3. 将所有这些入口 require 到一个统一的入口文件中,然后用 webpack 打包压缩输出到 bundle.js 。

    require('app.js')
    require('page1.js')
    require('page2.js')
    ...
  4. 现在 page.js 里的代码都打包到单一文件 bundle.js 里了。将 page.js 内容替换成 global['p' + index]() ,这样第三步中的 Page(pageOpt) 不就可以执行注册页面了。

  5. 最后一步,替换 app.js 内容为 require('./bundle.js') 即大功告成。

压缩 WXML、WXSS、JSON

WXML

  • /<!--((.|\n|\r)*?)-->/gm 去除注释
  • /\"\n\s*/g 去除换行

WXSS

JSON

  • 直接 JSON.stringify(JSON.parse(...))

这里,有些读者会可能提出两个疑问:

  1. 空白字符、换行能有多少,减不了多少吧?
  2. 开发者工具为什么不做对这些文件的压缩?

关于第一个问题,一个约 1000KB 的代码,空白字符和换行大概有 10KB。在有上限的情况之下,10 KB 也是要珍惜的。

关于第二个问题,个人认为微信开发者工具的开发者觉得没有必要去做。因为,WXML 和 WXSS 都会被转义成 JavaScript 脚本,在此过程中,不管 WXML 和 WXSS 是否被压缩,它们的转化结果是相同的。因此,压缩与否,对于最终产物是没有影响的(最终产物指在服务器二次打包后的结果,也是用户真正使用的)。但是,Size 是以本地打包上传的内容进行计算的,不进行此步压缩,会使微信服务端判定的 Size 增大。

删除无用文件

工程庞大了,肯定会存在很多无用的空目录,空文件,没有被 import 的 js 、 wxml 、 wxss 文件。

删除这些无用文件不仅可以减小 size,还可以提升小程序加载时间。上文说了这些文件都会被转成 JavaScript 进行加载的,是会占用加载时间的。

删除无用 JavaScript

由于通过 webpack 打包,除了 page.js 、 bundle .js 文件,其他 js 文件都可以删掉。

删除无用 WXML

打包压缩工具在打包时,已经记录了所有页面的路由。遍历分析所有路由下的 wxml 文件,通过 xmldom 解析代码记录其他被 import 的 wxml 文件。最后遍历所有 wxml 文件,删除不在 import 列表里的无用 wxml 文件。

删除无用 WXSS

类似处理 WXML。遍历分析所有路由下的 wxss 文件,通过正则 /@import\s*["']([^"']+)["']/g 分析代码记录其他被 import 的 wxss 文件。最后遍历所有 wxss 文件,删除不在 import 列表里的无用 wxss 文件。

代码级优化

除了利用工具进行压缩,在编写代码时,也可以通过一些方法来减小体积,在这里简单列几点:

  • 使用 ES6 时,尽量不使用依赖 Runtime/Polyfill 的语法,例如 import 和 class 。
  • 图标使用 Iconfont。
  • 等等…

最终效果

经过打包工具的极限压缩处理,还有代码设计上的可复用性,目前我们七个业务线的微信小程序整合后代码编译包大小维持在 1300KB 左右。

还剩余 730KB 的可用空间。

结语

希望此次在微信小程序整合上做的,工程化抽取公共逻辑、规范业务代码,通过工具进行针对性的代码打包压缩的实践能给大家带来一定的帮助

© 著作权归作者所有

共有 人打赏支持
第九程序
粉丝 84
博文 142
码字总数 172691
作品 0
厦门
程序员
Taro实践 - 快速开发【知乎】多端应用

来自团队小伙伴 - 阿集,关于 Taro 上手实践的一篇文章,希望对大家的使用有所帮助。 1. Taro 简介 是由凹凸实验室打造的一套遵循 语法规范的多端统一开发框架。 使用 ,我们可以只书写一套代...

凹凸实验室
06/27
0
0
如何在微信小程序中调用腾讯地图api

如果要搜索地图上的位置,比如附近的医院、学校等,就需要使用地图api,使用腾讯地图api的过程如下: 一、开发者申请腾讯地图 进入官网http://lbs.qq.com/key.html 申请密钥 验证完手机邮箱之...

临江仙卜算子
05/25
0
0
云+社区小程序知识周,等你来挑战!

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 云+社区,致力于打造云计算技术生态圈,帮助开发者提高技术影响力。 本次云+社区小程序知识周,致力于促进小程序开发者分享小程序...

腾讯云+社区
06/26
0
0
分享几个微信小程序开发框架和工具

###【小程序开发框架】 1、官方框架MINA 小程序提供的开发框架为MINA框架,它类似于淘宝Weex、Vue框架。MINA框架通过封装微信客户端提供的文件系统、网络通信、任务管理、数据安全等基础功能...

codeGoogle
04/18
0
0
Promise.all 应用一例

在做小程序地图开发的时候,需要在地图上放置不同图标的 ,而这些图标又来自网络,恰恰由于微信小程序的限制,不支持网络图片作为 的 值 微信小程序文档 但注意到也支持临时路径这句话,则可...

lip2up
03/29
0
0
腾讯云+社区沙龙·小程序敏捷开发实战(北京)开启报名

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:由云加社区技术沙龙发表在云+社区 2018伊始,最火爆的不是春晚和红包,而是从天而降的“跳一跳”。这款来自微信的轻量级小...

腾讯云+社区
03/22
0
0
透笔度/wx-jq

wx-jq (一套完全原创的微信小程序插件集合库) 微信小程序插件,微信小程序组件,微信小程序插件集合,微信小程序组件集合,微信小程序插件学习,微信小程序插件开发, 查看效果截图: http...

透笔度
01/26
0
0
微信小程序商店 | 即速商店_小程序流量平台

微信小程序商店 | 即速商店 即速应用商店-分类最齐全的微信小程序商店,收录当前最新最热门小程序,汇集各行业小程序案例及评测,在这里可以轻松找到各种实用好玩的小程序,也可 免费发布 自...

jisuapp
02/08
0
0
微信小程序开发者文档教程,从入门到精通 (附超过100个完整项目源代码、文档)

微信小程序开发者文档官网地址 https://mp.weixin.qq.com/debug/wxadoc/dev/index.html 微信小程序教程资料和开发工具大全,文档、代码、例子、工具 http://download.csdn.net/detail/wyx100...

刘重洋
06/27
0
0
如何为你的服务器申请免费的SSL证书

一、前戏 在文章《利用微信小程序和Kubernetes打造简易私有云(一、开篇)》中,本人计划用微信小程序作为K8S私有云的前端。由于之前对微信小程序也不了解,就不得不走一遍流程来学习实践,才...

宅楠军
05/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

HashMap? ConcurrentHashMap? 相信看完这篇没人能难住你!

前言 Map 这样的 Key Value 在软件开发中是非常经典的结构,常用于在内存中存放数据。 本篇主要想讨论 ConcurrentHashMap 这样一个并发容器,在正式开始之前我觉得有必要谈谈 HashMap,没有它...

crossoverJie
6分钟前
1
0
OSChina 周一乱弹 —— 你的朋友圈有点生锈了

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @Devoes :分享Trademark的单曲《Only Love (电视剧《妙手仁心 II》插曲)》: 《Only Love (电视剧《妙手仁心 II》插曲)》- Trademark 手机党少...

小小编辑
今天
204
9
【面试题】盲人坐飞机

有100位乘客乘坐飞机,其中有一位是盲人,每位乘客都按自己的座位号就坐。由于盲人看不见自己的座位号,所以他可能会坐错位置,而自己的座位被占的乘客会随便找个座位就坐。问所有乘客都坐对...

garkey
今天
1
0
谈谈神秘的ES6——(二)ES6的变量

谈谈神秘的ES6——(二)ES6的变量 我们在《零基础入门JavaScript》的时候就说过,在ES5里,变量是有弊端的,我们先来回顾一下。 首先,在ES5中,我们所有的变量都是通过关键字var来定义的。...

JandenMa
今天
1
0
arts-week1

Algorithm 594. Longest Harmonious Subsequence - LeetCode 274. H-Index - LeetCode 219. Contains Duplicate II - LeetCode 217. Contains Duplicate - LeetCode 438. Find All Anagrams ......

yysue
今天
2
0
NNS拍卖合约

前言 关于NNS的介绍,这里就不多做描述,相关的信息可以查看NNS的白皮书http://doc.neons.name/zh_CN/latest/nns_background.html。 首先nns中使用的竞价货币是sgas,关于sgas介绍可以戳htt...

红烧飞鱼
今天
1
0
Java IO类库之管道流PipeInputStream与PipeOutputStream

一、java管道流介绍 在java多线程通信中管道通信是一种重要的通信方式,在java中我们通过配套使用管道输出流PipedOutputStream和管道输入流PipedInputStream完成线程间通信。多线程管道通信的...

老韭菜
今天
0
0
AB 压力测试

Ubuntu 安装AB apapt-get install apache2-utils 使用AB 压力测试 -c 并发数 -n请求总数 ab -c 3000 -n 10000 http://localhost/test/index.php AB只能测试localhost 返回结果 This is Apac......

xiawet
今天
0
0
用Python绘制红楼梦词云图,竟然发现了这个!

Python在数据分析中越来越受欢迎,已经达到了统计学家对R的喜爱程度,Python的拥护者们当然不会落后于R,开发了一个个好玩的数据分析工具,下面我们来看看如何使用Python,来读红楼梦,绘制小...

猫咪编程
今天
1
0
Java中 发出请求获取别人的数据(阿里云 查询IP归属地)

1.效果 调用阿里云的接口 去定位IP地址 2. 代码 /** * 1. Java中远程调用方法 * http://localhost:8080/mavenssm20180519/invokingUrl.action * @Title: invokingUrl * @Description: * @ret......

Lucky_Me
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部