【前言】

小程序开发中,有时会遇到下面这种情况,项目目录中存放过大的js包,会被警告影响手机端性能,同时让开发编译启动变得很慢。慢是其次,单是影响性能这一点,就需要解决一下。

【云资源】

将项目js包放入公司的oss、obs之类的云存储上,通过https链接来访问。

https链接不能使用node的require加载,会抛错,但是可以通过其他两种方式进行访问:

  1. request请求

  2. fileSystemManager文件管理器

方法1简单,但是不可取,原因如下:

1) 获得的文件信息,没有较好的保存方法,既不能存在store中,也不能存在local中,不仅是数据存储格式问题,更重要的同样会造成性能缺点,总不能解决了一个问题,又创造新的问题

2) 由于1)描述的那样,如果不能存储文件,那么每次需要依赖这个文件时,就需要每次请求接口,这就造成了资源浪费

故此,基于以上两点,只能负重前行,选择较为麻烦和让人头疼的方案2(fileSystemManager文件管理器),虽然麻烦,但是却可以一劳永逸,并且可以抽离逻辑封装成一套方法,可以在以后复用。

【前期准备】

实现方案前,有几个注意事项:

1. 首先要将存放云资源的oss或obs的域名配置在白名单中,这里就需要配置request合法域名和downloadFile合法域名。

2. 需要勾选“不校验合法域名...”,不勾选的话,真机会遇到意想不到的问题。

3. 将js文件转成json文件,如果没办法,就自行抽离js包,拆出一个json文件,因为微信fileSystemManager不支持读取js文件,js文件会变成string文本,但是支持json。

当然,如果你觉得可以使用JavaScript 解释器来破这个局,那么你又一次要碰壁了,微信官方对此做了限制,禁止eval5、estime、evil-eval等动态执行代码的js解释器。

原文地址:关于禁止小程序JavaScript解释器使用规范要求

【方案思考】

fileSystemManager,它是getFileSystemManager返回的对象,给我们暴露出了多个方法,下面为部分截图

原文地址:FileSystemManager

为保证性能和可靠性,这里我们采用下面这种方案:

首次:下载 + 保存 + 读取,非首次:直接读取

流程图如下:

【方法封装】

我这里提供了两种封装写法:

  1. 链式写法,方便回调处理,不需要回调可以采用写法2
  2. 解耦式写法,降低了函数颗粒度,每个方法独立,更加灵活,可以单独使用某一个函数

千言万语,前面的铺垫已完成,直接上代码:

链式写法

解耦式写法

到此,就封装完成了,后面使用看具体场景,来选择链式、解耦式写法。

小程序优化:第三方SDK过大解决方案的更多相关文章

  1. 微信小程序腾讯云php后台解决方案

    微信小程序腾讯云php后台解决方案 微信小程序前段需要添加必要的文件以配合后端 (1)wafer2-client-sdk sdk提供了几种接口包括登陆,获取用户openid,图片上传等 (2)conf ...

  2. 微信小程序优化

    setData setData 是小程序开发中使用最频繁的接口,也是最容易引发性能问题的接口.在介绍常见的错误用法前,先简单介绍一下 setData 背后的工作原理. 工作原理 小程序的视图层目前使用 ...

  3. 小程序setData数据量过大时候会对渲染有影响吗?

    datas:[ { id:1000, name: "帅哥", title: '...', b: '...', d: 0, f:0, .... }, { id:1001, name: ...

  4. Day12-微信小程序实战-交友小程序-优化“附近的人”页面与serach组件的布局和样式以及搜索历史记录和本地缓存*内附代码)

    回顾/:我们已经实现了显示附近的人的功能了,可以多个人看到附近的人页面了 但是还是要进行优化有几个问题:1.我们用户选择了其他的自定义头像之后,在首页可以看到头像的变化,但是在附近的人中头像会变成报错 ...

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

    随着微信公众平台的开放,微信端小程序涌现市场,带来很很多便利和简单的原生操作,询:微信端小程序是否会替代传统的APP应用?两者的优劣如何?我们一起来看看传统APP与微信端小程序十大优劣对比       ...

  6. 微信小程序基于第三方websocket的服务器端部署

    微信小程序后台请求越来越严格 1.request要求用https 2.websocket要求用wss 3.测试后发现websocket只能走433端口 作为.net开发,websocket又是使用的第 ...

  7. 微信小程序和APP优劣势大对比

    小程序的优势: 1. 无需下载,随走随关 2. 功能丰富,体验更简便 3. 接口众多,可以进行不断的开发 4. 流量入口大,背靠日活9.6亿的微信 5. 有强大的微信生态环境 小程序对比APP的好处: ...

  8. uni微信小程序优化,几行代码就能省100kb的主包空间?

    不是标题党,我们公司的项目确确实实是省下了100kb的主包空间,而且还是在没有牺牲任何的性能和业务的前提下实现的. 但是100kb是根据项目大小,所以你用这个插件可能省下超过100kb或者更少. 直接 ...

  9. uni微信小程序优化,打包后的import vue路径是可删除的

    这次的优化我公司项目主包只减小了32kb,但是减小的不仅仅是主包,所有分包均在没有改动任何业务代码的情况下完成了压缩空间的优化. 主包分包压缩空间的优化都要视项目而定,32kb只是我公司的小程序项目. ...

  10. Please do not register multiple Pages in undefined.js 小程序报错的几种解决方案

    Wed Jun 27 2018 09:25:43 GMT+0800 (中国标准时间) Page 注册错误,Please do not register multiple Pages in undefi ...

随机推荐

  1. MySQL高级9-锁

    一.简介 锁是计算机协调多个进程或线程并发访问某一资源的机制.在数据库中,除了传统的计算资源(CPU.RAM.i/O)的挣用以外,数据也是一种供许多用户共享的资源.如何保证数据并发访问的一致性,有效性 ...

  2. KRPANO资源分析工具下载四方环视全景图

    提示:目前分析工具中的全景图下载功能将被极速全景图下载大师替代,相比分析工具,极速全景图下载大师支持更多的网站(包括各类KRPano全景网站,和百度街景) 详细可以查看如下的链接: 极速全景图下载大师 ...

  3. 「atcoder - abc246h」01? Queries

    link. 平时基本打不到 ex,这个 ex 还是比较 ez 的,但也有些需要注意的地方. 考虑 dp 规划前缀,设 \(f[i][0/1]\) 表示前缀 \([1, i]\) 否是选 \(i\) 的 ...

  4. Mybatis中的设计模式

    最近在看<通用源码阅读指导书:Mybatis源码详解>,这本书一一介绍了Mybatis中的各个包的功能,同时也涉及讲了一些阅读源码的技巧,还讲了一些源码中涉及的设计模式,这是本篇文章介绍的 ...

  5. OKR 是什么?

    OKR OKR 是什么? OKR(Objectives and Key Results)目标与关键结果管理法,起源于英特尔,后在谷歌发扬光大. OKR 是一套协助组织进行目标管理的工具和方法,旨在促进 ...

  6. 【最佳实践】高可用mongodb集群(1分片+3副本):规划及部署

    结合我们的生产需求,本次详细整理了最新版本 MonogoDB 7.0 集群的规划及部署过程,具有较大的参考价值,基本可照搬使用. 适应数据规模为T级的场景,由于设计了分片支撑,后续如有大数据量需求,可 ...

  7. Java 深度优先搜索 and 广度优先搜索的算法原理和代码展示

    111. 二叉树的最小深度 题目:给定一个二叉树,找出其最小深度.最小深度是从根节点到最近叶子节点的最短路径上的节点数量. 说明:叶子节点是指没有子节点的节点. 方法1:深度优先搜索 原理:深度优先搜 ...

  8. flyod

    最开始看错数据了没看到Q = 100 是50%的数据以为跑q遍floyd能过,结果只有30,其他全t 1.要注意题目中的条件,挖掘一些性质 var code = "92ce4972-7e0f ...

  9. 线段树(nb)

    今天刚学习了线段树,赶紧趁热打了两遍模版 下面都是线段树的基本操作,这个板子是维护的区间中的最大值,当然修改change和build包括线段树中的data可以维护区间上的不同信息. 首先介绍一下线段树 ...

  10. 面试题:MySQL事务的ACID如何实现?

    大家好,我是[码老思],事务是一个数据库绕不开的话题,今天和大家一起聊聊. 事务是什么? 事务(Transaction)是并发控制的基本单位.所谓的事务呢,它是一个操作序列,这些操作要么都执行,要么都 ...