likes
comments
collection
share

「小程序系列」之大小超限除了分包还能怎么做？

作者站长头像
站长
· 阅读数 18

大佬们好，我是季夏廿九(是nian九哦)，专业切图仔。🦞

🌲🌲🌲 前言：

    前几天一个刚入行的朋友为微信问我提交小程序代码提示太大了不能上传是什么原因？怎么解决？     当然分包能解决微信小程序几乎所有的提交大小限制问题，但是我还是让他把提示内容发给我。我一看也就超出了四五百kb，用分包那不是大材小用🤣就让他把静态资源压缩一下就搞定了，但是后面我想想分包除了能解决大小这个问题还有什么好处呐？还有什么办法能避免大小超过限制的情况？

🍀🍀🍀 正文：

🔴当前微信小程序大小限制以及为什么要限制大小：

    1️⃣先看一下当前微信小程序对于大小方面的相关限制：         1.不限制分包的数量；         2.所有分包的大小不能超过20m；         3.单个包的大小不能超过2m；

    2️⃣那么为什么微信小程序要对大小做限制？         因为小程序的设计初衷就是用完即走，轻量化应用。不建议将它当成一个app来设计，所以考虑到启动速度等方面所以才对大小做了限制。

🟠避免和解决大小限制有什么办法：

    知道了上面的相关限制，那么我们可以从开发的过程去尽量避免我们的小程序大小超过20M(当然是那种商城啥的量级很大的当我没说😂)

🃑1.使用第三方库尽量按需加载

    比如说像在项目里面使用echarts,通常我们用到的可能也有几种图标，所以在安装的时候没必要将echarts全部下载，直接在echarts官网在线定制可以节省不止一星半点的大小(echarts中国地图有问题不推荐使用哦)像我们使用的一些ui库类似，能按需引入就按需引入不能按需引入我们就换一个😄 在这里推荐一些微信小程序常用的UI库合集 1.官方WeUI组件库 「小程序系列」之大小超限除了分包还能怎么做？ 2.ColorUI 「小程序系列」之大小超限除了分包还能怎么做？ 3.Vant Weapp UI 「小程序系列」之大小超限除了分包还能怎么做？ 4.iView UI 「小程序系列」之大小超限除了分包还能怎么做？ 5.TaroUI 「小程序系列」之大小超限除了分包还能怎么做？ 擦，怎么调整图片大小这个

🃒2.压缩图片等静态文件

    项目中肯定会用到很多的图片，一张图片通常情况下设计会给我们二倍图、三倍图，让我们根据不同的分辨率去展示不同的倍图。其实粗暴的方法我们不管什么分辨率都可以都使用三倍图(不推荐使用哦),然后把图片无损压缩一下，一般能减小图片百分之七十的大小。 在这里推荐一个图片压缩的地址图片压缩

🃃3.静态资源放云服务

    减少静态资源在打包文件里面占用的体积，还可以把项目里面使用的静态文件放在OSS上面，使用CDN加速还可以减少代码大小。如果要自己弄云服务器放静态资源，建议薅七牛云的羊毛。😂 注册一个七牛云账号->找到所有产品中的对象存储->上传图片->复制链接 ⚠️注意：有时候访问不了是需要配置防盗链，具体怎么配置大佬们自行百度。😄

🃔4.使用分包

🔍来到我们正统的解决大小限制的方法，先看一下文章刚开头提出的问题： 分包除了能解决大小这个问题还有什么好处呐？ 📝要回答这个问题先了解一下分包到底是怎么样工作的： 在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。 那么上面的问题就好回答了: 🔔🔔对小程序进行分包,可以优化小程序首次启动的下载时间,以及在多团队共同开发时可以更好的解耦协作。

那么我们要分包应该怎么做❓：     下面列举了我们常用的原生、uniapp、taro的分包写法，三种开发方式做分包除了配置文件名称是不同的，代码都是一样，关键的是项目目录和subpackages字段。 🖊原生：

// 在app.json的subpackages字段声明项目分包结构
{
  "pages":[			主包
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [	分包	
    {
      "root": "packageA",	
      "pages": [
        "pages/cat",	相对于root分包的路径
        "pages/dog"
      ]
    }, {
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/apple",
        "pages/banana"
      ]
    },
    {
        root:分包根目录
        name:分包别名,分包预下载时可以使用
        pages:分包页面路径数组,相对与分包根目录
        independent:true|false分包是否是独立分包
    }
  ]
}

🖊uniapp：

// 在pages.json的subpackages字段声明项目分包结构
代码同原生，关键就是subpackages字段

🖊taro：

// 在src目录下app.jsx中进行配置
代码同原生，关键就是subpackages字段

🔵分包之后依旧过大或者vendor.js很大怎么解决：

    相信使用uni-app开发小程序的大佬们对vendor.js这个文件名字应该很熟悉了。除了这个文件还可能因为开发过程中的需要，项目代码使用分包之后代码体积还是超过2M，那么有什么解决的方案？还是分uni-app和taro来说：

🖊uniapp： uniapp最常遇到的就是打包之后vendor.js过大，导致不能预览或者不能提交，毕竟vendor.js是集成了项目所有的第三方依赖库。官方提供了对应的方法： 🀙：HBuilderX创建的项目勾选运行–>运行到小程序模拟器–>运行时是否压缩代码 🀚：(Tree Shaking)使用cli创建的项目，可以在pacakge.json中添加参数–minimize 🀛：(分包优化)在manifest.json，点击源码视图：查找：mp-weixin：添加："optimization":{ "subPackages":true } Tipes: 可以尝试把依赖都通过cdn的方式引入。

🖊taro： 🀙：使用plugins.uglify压缩代码(官方配置)

如果使用了这些方法还是太大的话，我建议可以考虑换个项目了😂 开个玩笑，最后的结局方案就是使用gulp，rollup等对你的代码文件都单独压缩一下。

💐💐💐 结语：

    微信小程序分包其实是一个很简单的操作，不过还有一个分包异步化，预下载、独立分包等知识还是需要各位大佬再用到的时候自己多研究📕。     最后说一下，前段时间参加了这个年度人气排行，其实我也知道这个榜单并不能代表什么，但是最后结果出来排54还是让我虚荣了一下。我觉得这个标志对自己的意义就是督促我在新的一年输出更高质量的文章，让自己真的配得上这个称号，各位大佬我们一块加油。     最后祝各位大佬学习进步，事业有成！🎆🎆🎆

转载自:https://juejin.cn/post/7048491428153933860
评论
请登录