[uniapp]微信小程序分包

今天在项目开发时,由于素材都是存在本地了,然后还没压缩,导致小程序项目超出了2MB,然后无法编译了,就了解了一下分包,在采取分包后,顺利解决!

本篇文章中,小程序采用的是Uniapp框架,和原生小程序中的分包流程相同,只不过无需修改manifest.json文件。

分包简介

在微信小程序中,默认只有一个主包,在项目打包时,所有的资源(页面及资源等)都被放到了主包中。

  • 造成的问题: 在小程序中,主包的体积最大只可以达到2MB,如果超出了2MB,则不通过了。

对于以上的问题,可以采取分包,分包就相当于将指定的页面及资源,单独放在一个包中,不在放到主包中,从而减少主包的体积。

  • 分包的上限及条件: 开发者可以分N个包,但是要求每个包不允许超过2MB,整个小程序所有分包大小不能超过20MB。
  • 分包的好处: 主包中一般存放的都是Tabbar页面,如果将非Tabbar页面从主包中移除,则可以加快加载速度。

分包中的内容,默认不加载,只有需要用到它时,再去现场加载,当然,可以通过分包预下载去提前加载分包中的内容。


使用分包 - uniapp

注意: 如果是Tabbar页面,或者是多个分包需要用到的公共资源,请放到主包中。

  • 分包可以访问主包中的资源,而主包不允许访问分包中的资源。

假设:

  • 现在有一个用户端[公共的],一个管理端[需要权限],我们可以将用户端放到主包中,将管理端的内容分成一个包。
  • 因为用户在进入小程序时,默认进入的都是用户端,没必要将管理端的资源也加载上,只有当拥有权限并且在切换到管理端时,我们在去加载管理端的内容。
// 当前文件结构树[未分包],默认都存放到pages中,当分包后,pages中的内容就是主包的内容。
pages:
 |- ... //假设用户端页面有N个,这里就不写了
 |- backStage/index/index.vue:管理端首页
 |- backStage/xxxxx/index.vue:管理端第二页


/*
分包准备:
 1.新建一个文件夹,和pages同级,*每个文件夹相当于一个分包*,并将静态资源命名为static然后放到分包的根目录下。
 2.在该分包下新建一个pages文件夹,该文件夹中存储页面文件夹。
 3.然后将分包中的内容,从主包中移走。
*/

// 主包
pages:
 |- ...//用户端的内容

// 管理端分包
backStagePackage:
 |- pages:管理端页面
    |- index/index.vue:管理端首页
    |- xxxxx/index.vue:管理端第二页
 |- static:静态资源

然后打开manifest.json文件,在mp-weixin节点中的根节点下,添加配置:

"optimization": {
    "subPackages": true
}

接着打开pages.json配置分包:

  • 在和pages同级节点下,添加subPackages字段,值为数组,它用于配置分包。它的每一个元素是一个对象,每个元素及为一个分包。

  • 使用管理端分包为例,首先在数组中添加一个对象,对象中拥有:root,pages,name,independent字段。


root属性:它的值为分包文件夹的名称,即:backStagePackage。

pages属性:它的值为一个数组,每一个元素填写分包中的页面路径即可(不需要加上分包名)。

name属性:分包别名,分包预下载时可以使用。

independent属性:是否开启独立分包,默认不开启(false)。

"subPackages": [
    {
        "root": "backStagePackage",
        "pages": [
            "pages/index/index",
            "pages/xxxxx/index"
        ]
    }
]
发表评论 / Comment

用心评论~