创新互联百度小程序教程:减少主包体积

  • 减少主包体积
    • 为何要减少主包体积
    • 主包里都包含什么内容
    • 减少主包体积的方式
    • 方式1:减少主包中包含的页面
      • 思考1:主包中应该包含什么内容呢?
      • 思考2:如何在不影响外部推广的情况下,剔除主包中的部分页面?
        • 注意:
      • 思考3:主包中的内容是越少越好么?
      • 思考4:其他的页面分成几个子包合适?
        • 1、【并行下载子包数量】
        • 2、【包体积与下载失败率】
        • 3、【分包页面与主包页面紧密程度、页面入口pv】
    • 方式2:减少自定义组件
      • 1、减少共用的自定义组件
      • 2、减少非共用的自定义组件
  • 方式3:优化公共资源
    • 1、优化 fn.js 文件
    • 2、优化公共资源中的 css
    • 3、优化公共资源中的图片

    减少主包体积

    为何要减少主包体积

    从前文小程序的启动流程得知,在打开小程序的页面时会经过【下载小程序包】、【加载主包资源】、【执行页面逻辑】等过程,如果主包中内容较多,会影响【下载小程序包】和【加载主包资源】的时长,页面展示就会变慢,fmp 也会升高。在性能优化中,我们需要找到各种办法降低fmp。

    主包里都包含什么内容

    我们先来看看小程序的编译逻辑:

    来源 内容 编译后去向
    主包 .swan / .js / .css / .json 主包
    分包 .swan / .js / .css / .json 分包
    自定义组件 .swan / .js / .css / .json 主包
    公共资源中 .js 整个项目中,引用次数大于1的文件编译在 主包 中,其他在分包中
    .css 编译到引用的各个页面中,编译后当前css内容的体积会成倍增长
    图片 / .json 主包
    npm包 服务组件 / 插件 / 动态库 主包
    utils方法 整个项目中,引用次数大于1的文件,编译在 主包 中,其他在分包中
    模板 如果模板被开发者放入主包中,编译后就在主包中;如果放入分包中,编译后就在分包中

    从上表中的编译逻辑可以分析出:

    • 自定义组件(插件、动态库等)编译时都会打包到主包中,目前还不支持依赖分析,这些内容的体积会影响主包大小
    • 公共资源中的图片在编译时无法进行依赖分析,所以会直接划分到主包中

    减少主包体积的方式

    方式1:减少主包中包含的页面

    思考1:主包中应该包含什么内容呢?

    首先按官网规定,app.json - tabBar 中设置的页面,是必须要放在主包中的,其次重点页面也需要放在主包中。从 fmp 计算方式可知,我们需要知道小程序中哪些是入口页面。这方面的信息,从开发者平台的数据中可以查到。在开发者平台找到目标小程序的【数据分析-行为分析】,我们可以按入口页次数排序,找到访问量大的页面,这些就是需要放在主包中的页面。

    需要注意的是,如果小程序入口较为分散,则需要计算出多少个页面对小程序整体 fmp 有较大影响。

    思考2:如何在不影响外部推广的情况下,剔除主包中的部分页面?

    如果主包中已经包括了很多不重要的页面,且不确定是否有外部推广,不敢随意改动真是路径,我们可以选择通过自定义路由来映射 path 与真实页面路径,从而在不影响外部推广的前提下,把这部分页面从主包中划分出去,减少主包体积。
    以某政务小程序为例,主包中的页面从访问量小的开始算,从主包中使用自定义路由移除48个页面,fmp提升了5%左右。在使用自定义路由后,项目上线时需要注意小程序基础库版本的升级。

    注意:

    • 自定义路由虽然可以让我们很方便的分包,但过多的自定义路由配置,会增加小程序初始化时长,从而增加整体 fmp 时长。所以自定义路由在必须配置的前提下,越少越好。以某政务小程序为例,增加50个自定义路由配置后,fmp 增加了15ms。
    • app.json中在设置 app.json - preloadRule 时,key值并没有用处,所以增加路由后,key 值写成 path 还是真实路径都可以,小程序框架框架中只会读取 value 值。

    思考3:主包中的内容是越少越好么?

    这就要结合小程序的主包、分包下载机制来看,如果页面在分包中的话,打开页面时会同时需要下载主包和分包。

    入口 下载内容
    入口为主包页面 主包
    入口为分包a中的页面 主包、分包a

    思考4:其他的页面分成几个子包合适?

    这要从小程序并行下载子包数量、包体积与下载失败率的关系、分包页面与主包页面紧密程度、页面入口 pv 等几个方面来综合衡量。

    1、【并行下载子包数量】

    小程序双端并发下载数量较少,大概率都是串行下载,所以分包数量不宜过多。

    2、【包体积与下载失败率】

    双端下载失败率均在千分之几以内,按经验来说,如果待下载的内容在 1M 以下的体积,下载失败率可以忽略不计

    3、【分包页面与主包页面紧密程度、页面入口pv】

    这是个需要具体小程序具体分析的问题。以某政务小程序为例:

    • 某政务小程序小程序页面很多,首先我们分出了页面月总pv在500的以下,这些访问量很小的页面被分在 lower 分包中
    • 从开发者可查询到主包页面的跳转依赖的页面数据,这些依赖页面打在 mainDep 包中,其中刨除掉 lower 中已有的
    • lower 分包中的页面由于访问量很小,在 app.json - preloadRule 中设置需要下载的分包时,不设置 lower 分包
    • 综合考虑后某政务小程序分为 mainDep 和 lower 2个 分包

    方式2:减少自定义组件

    1、减少共用的自定义组件

    根据编译逻辑可知,小程序中使用的所有自定义组件目前还无法按需加载,这些自定义组件暂时都会编译到主包中。由于分包页面都不是重点页面,只在分包中使用的自定义组件,可以考虑直接放在分包各页面的模板中,减少主包体积

    2、减少非共用的自定义组件

    只有一个页面使用的自定义组件,可以直接合并到页面模板中,减少初始化和创建自定义组件的损耗

    方式3:优化公共资源

    1、优化 fn.js 文件

    fn.js 文件就是我们常说的公共资源或者 utils 中的 js 文件,根据编译逻辑可知,这种 js 文件如果被引用大于1次,就会编译到主包中。开发中往往我们的 fn.js 文件中,都会包含很多个方法,导致页面无法精确的引用,从而不能更精确的编译打包。建议每个方法写在一个文件中,方便更精准的编译打包。

    2、优化公共资源中的 css

    根据编译逻辑可知,公共资源中的 css 文件,被页面 css 文件引用后,编译时会自动合并到每个页面的 css 中。也就是说,公共资源中的css看起来是写了一份,但编译后会成倍复制,分别merge到引用的页面中,所以公共资源中的 css 只提取必要内容的即可。尽量减少引用公共资源中的 css 后,又在页面 css 中覆盖一遍的情况。

    3、优化公共资源中的图片

    根据编译逻辑可知,所有在非分包页面文件夹中的图片,都会被打到主包中。所以需要逐个对我们的图片做筛选,如果图片较大,可以选择放在 CDN 上,尽量减少主包体积。同时,压缩图片也是必不可少的。

    文章题目:创新互联百度小程序教程:减少主包体积
    标题URL:http://www.shufengxianlan.com/qtweb/news18/436418.html

    网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

    广告

    声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联