关于uniapp:crmeb-小程序包大小超过2M的解决方法

39次阅读

共计 1210 个字符,预计需要花费 4 分钟才能阅读完成。

crmeb 小程序包大小超过 2M 的解决办法
微信限度了小程序的代码包不能超过 2MB,这次要是出于对小程序启动速度的思考。然而,2MB 的大小也限度了小程序性能的扩大,如果大小超出了 2MB 该如何解决呢?

优化代码,删除掉不必的代码
图片压缩或者上传服务器
个别图片所占用的空间比拟大,尽量不要放在小程序本地文件夹中,如果图片不多的话能够对图片进行压缩,图片压缩平台:https://tinyjpg.com/ 另外,通过 cli 命令创立的 uni app 我的项目,可将图片或字体图标放入 assets 文件夹下,通过 require 引入,也可缩小主包大。
分包加载:
什么是分包加载:

小程序个别都是由某几个性能组成,通常这几个性能之间是独立的,但会依赖一些公共的逻辑,且这些性能个别会对应某几个独立的页面。那么小程序代码的打包,能够依照性能的划分,拆分成几个分包,当须要用到某个性能时,才加载这个性能对应的分包。

对于用户来说,小程序加载流程变成了:

1. 首次启动时,先下载小程序主包,显示主包内的页面;

2. 当进入某个分包的页面,再下载这个对应分包,下载结束后,显示分包的页面。

采纳分包加载,对开发者而言,能使小程序有更大的代码体积,承载更多的性能与服务;而对用户而言,能够更快地关上小程序,同时在不影响启动速度前提下应用更多功能。

分包的划分:

在配置前,依照性能对各个分包的内容进行划分,将同一个性能下的页面和逻辑放在童改一个目录下,把一些跨性能的公共逻辑放在主包下。

在分包划分时需注意:

1. 包与包之间性能尽可能独立,防止分包与分包之间援用上的耦合。因为分包的加载是由用户操作触发的,并不能确保某分包加载时,另外一个分包就肯定存在,这个时候可能会导致 JS 逻辑异样的状况,例如报「”xxx.js” is not defined」这样的谬误;

2. 一些公共的自定义组件,要放在主包内。

分包的配置:

在 uni app 中通过 cli 初始化的小程序目录构造如下:

├── src

├── main.js

├── App.vue

├── pages.json

├── manifest.json

├── orderPackages

│ └── pages

│ ├── goodsDetail

│ └── myorder

├── pages

│ ├── index

│ └── user

└── utils

需在 pages.json 中配置 subPackages 字段,在 subPackage 外面申明我的项目的分包构造:

crmeb 小程序包大小超过 2M 的解决办法
目前小程序分包大小的限度:

整个小程序所有分包大小不超过 4M

单个分包 / 主包大小不能超过 2M

以上只列举了 uni app 框架分包加载的步骤,原生小程序分包办法依据官网文档即可疾速实现,小程序框架虽多,大都大同小异,如果后续有应用其余框架进行开发,会进行补充。

如果你感觉这篇文章对你有点用的话,麻烦请给咱们的开源我的项目点点 star:http://github.crmeb.net/u/defu 不胜感激!

正文完
 0