用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
  • TA的每日心情
    无聊
    2017-8-15 16:38
  • 签到天数: 42 天

    [LV.5]常住居民I

    898

    主题

    2087

    帖子

    3万

    金钱

    管理员

    论坛管理员

    Rank: 9Rank: 9Rank: 9

    积分
    0

    突出贡献优秀版主荣誉管理论坛元老

    QQ
    2018-1-16 17:13:26 zhichi_admin 管理员 楼主 32605
    为增加小程序开发的灵活性,小程序代码包大小限制放开!开发者可开发出功能更加丰富,体验更优的小程序

    小程序在线学习平台http://school.jisuapp.cn/

    微信小程序代码包大小由1M扩大到2M

    PS:2M的小程序代码空间是不是又可以多放一些页面和图片了!答案是肯定的!
    但是!2018年1月15号微信公开课PRO上小程序产品经理angusdu提到,为了保证小程序页面的首次加载时间控制在2秒以内,且打开不出现白页加载,小程序代码包最理想的情况是:
    不超过1M

    那么,有什么方法可以帮助我们合理控制小程序代码包的大小!

    一、控制代码包大小主要意义
    • 避开大小限制
      小程序代码包体积存在大小限制,一开始为1MB,后来改为2MB,代码包体积超过此上限时将无法进行预览/上传/发布。
    • 降低用户获取成本
      减小代码包体积,可以降低小程序下载时长&首次加载时长,降低新用户流失率;同时减少下载流量和本地空间占用,提升用户体验。
    • 开发维护
      保持代码包干净整洁,一定程度上有利于代码的长期维护。

    二、控制代码包大小主要策略

    • 能搬的尽量搬。图片、音频、数据、甚至页面,很多都可以搬至服务端,需要时再通过网络载入。将非核心非必要的内容移出代码包可以大幅度释放代码包空间。

    • 搬不了的尽量删。已下线、已废弃、无关、冗余等不需要/不再需要的内容应及时清理,避免持续占用代码包空间。
    • 压缩
      删不了的尽量压缩。图片、js、wxss、wxml等均存在压缩空间。很多时候,适当程度的压缩,能在几乎不影响功能体验的同时,有效减少空间占用。
    • 合并
      压缩不了的尽量合并。功能类似的资源可以归一化,在需求/设计/实现层面减少资源的重复消耗。
    • 其它
      其它压缩策略。

    三、控制代码包大小实施
    • 资源外置
    非核心不紧急的资源文件,特别是图片、音频、视频等体积较大的媒体文件,可以移至cdn服务器,需要时再通过网络载入。
    这常常是小程序前期膨胀的主要原因和最有效压缩方式,比如我们的“手机30秒快卖”小程序,将图片资源移出代码包后,体积从约2MB直接降到了195KB。
    • 数据外置
      非核心不紧急的数据内容,包括城市地区等大段数据,标签映射等大段配置,使用条约、服务说明等大段文案,可以移至数据服务器或本地storage,需要时再予以载入。
      有些内容体积会比想象中大,比如我们的“转转使用条约”,移出代码包后,释放了约40KB空间。
    • 功能外置
      非核心自定义属性不强烈、不紧急可以异步处理的功能,可以移至外部实现。如选择地址、查看大图等功能可以交由小程序原生接口实现,编码解码等功能可以交由服务端实现。
    • 页面外置
      非核心不紧急的页面,可以考虑移至服务端。从基础库1.6.4起,小程序开始支持内嵌网页,非核心页面可以考虑适当往web服务器迁移。
    • [wepy] 清理残留文件
      目前wepy编译时不会自动清理上次编译残留的文件,导致历史资源持续积累。
    e.g. 7个页面,npm run build, 172KB -> 删掉6个页面, npm run build, 依然 172KB。
    因而应当修改build脚本,在编译前增加清空dist步骤,或在编译前手动删除dist目录。
    • 清理无关文件
      应避免代码包中混入运行无关的文件,如readme、doc、demo、测试用例等。
      可以通过设计合理的文件结构避免无关文件混入代码目录,wepy框架下也可以配置.wepyignore自动按类型/目录过滤文件(项目目录-新建.wepyignore文件-编辑-语法参考.gitignore)。
    • 清理已下线/已弃用文件
      已下线/已弃用的文件资源应及时清理,包括npm包、组件、页面、媒体资源等。若后续需要重新上线/重新使用,可以通过git等版本控制工具找回。这部分资源不需要持续占用代码包空间。
      IDE的查看引用、范围搜索等功能可以为清理过程提供一定的便利。
      资源都移至cdn之后,这部分空间可能就是最可观的了。“转转官方”小程序代码包体积从2MB出头降到了约1.5MB,主要就是由清理残留文件、清理已下线/已弃用文件释放的。
    • [wepy]清理多余wxml文件
      目前wepy编译时会将组件的dom部分拼合到页面中,而不生成单独的wxml文件。
      但若组件所在文件路径不含'/components/',则编译环节wepy不会识别其为组件,会按'Other'类型处理,从而生成多余的wxml文件和json文件。
      确保组件都放在components目录下可以避免这部分多余空间消耗。
    • 清理大文件
      大文件常常存在较大的压缩空间,值得重点排查和处理。
      查找大文件tip:资源管理器 - 代码目录 - 搜索'*' - 右键 - 排序方式:大小,即可将代码包内所有文件按大小排序展示
    • 资源压缩
      大部分资源都可以进行适当压缩,常常可以在保证功能体验的同时,有效地减少空间占用。参考工具:
      • js压缩: 配置wepy-plugin-uglifyjs插件
      • json、wxml压缩: 配置wepy-plugin-filemin插件
      • less压缩: 配置wepy-compiler-less插件
      • 图片压缩: 配置wepy-plugin-imagemin插件、TinyPNG
        其中TinyPNG工具压缩效果非常可观,400KB的图片压到40KB不足为奇,并且画质感知上几乎无损。

    • 资源合并
      功能类似的资源可以归一化,减少重复空间占用。
      • 需求层面,比如不同运营活动可以采用统一模板,而不每次增加单独页面等;
      • 样式层面,比如可以统一弹窗规范,而不引入五花八门的零碎弹窗组件等;
      • 设计开发层面,比如可以尽量解耦合抽取公共组件,减少重复造轮子等。

    • [wepy]清理组件DOM冗余拷贝?
      观察发现,目前wepy的组件实现中,编译后页面对组件js、wxss的引用是通过require、@import的形式实现的,而对组件dom的引用则是直接拼合到页面wxml文件中。
      这导致,当一个组件被多处引用时,其dom内容会有多份冗余拷贝。
    e.g. 10个页面引用了组件A => 编译出的10个页面wxml各含一份A的dom,A的template部分在代码包中被原模原样重复了10次
    如果修改wepy编译过程,将组件dom引用过程改为使用include或原生组件(基础库1.6.3开始支持)实现,应当可以节省这部分冗余开销。
    • [wepy]压缩自动生成的代码量?
      观察发现,代码包中除了手动维护的业务代码之外,也有不少框架/插件自动生成的代码。如源码编译过程中生成的辅助代码、兼容ES678语法引入的垫片代码、兼容各运行环境引入的css前缀代码等。
      通过对框架和插件进行修改/配置,应当可以一定程度减少这部分空间开销。比如对babel插件进行规则配置、对auto-prefix插件进行最低版本配置,应当可以牺牲部分不必要的兼容性,从而减少垫片代码的生成量等。诸如此类。
      只是笔者未及尝试,尚不确定这部分开销是否有可观的压缩空间。
    • 压缩额外文件空间?
      观察发现,代码包大小总是比代码内容总大小大得多(上传后详情面板中“上次上传”、“上次预览”总是比“本地代码”大得多)。
      这部分额外大小应当也是存在压缩空间的。比如将细碎图片、细碎js文件、细碎less文件拼合成雪碧图、js库、less库等较大文件,应当可以减少由于文件最小存储单元引入的额外空间开销等。诸如此类。
      只是笔者未及尝试,尚不确定这部分开销是否有可观的压缩空间。

    总结:由于轻量级特性,小程序开发环境中,对代码包体积的控制是十分必要且十分有意义的。

    使用道具 举报 回复
    沙发 我做了
    学习学习
    使用道具 举报 回复
    学习学习
    使用道具 举报 回复
    发新帖
    您需要登录后才可以回帖 登录 | 立即注册
    咫尺论坛|小程序开发社区
    X

    扫码添加专属客服即可随时咨询

    还可领取小程序推广攻略