• 小程序打包解决主包过大问题
• 一、静态文件采用链接形式引入
• 二、使用分包
• 三、打开上传代码时的代码压缩功能
• 四、启用依赖分离功能

小程序打包解决主包过大问题

在我们使用 uniapp 去开发微信小程序时，由于小程序主包规定最大不能超过 2MB，但是我们开发过程中下载的一些依赖和组件、静态文件，默认都会打包在主包里，这就导致主包会超过 2MB，就无法上传。可以通过以下方法进行解决：

• 静态文件采用链接形式引入
• 使用分包
• 打开上传代码时的代码压缩功能
• 启用依赖分离功能

一、静态文件采用链接形式引入

我们可以将一些静态文件，例如图片、视频等，采用链接的形式引入，这样就不会被打包在主包中。
例如：

<image src="URL_ADDRESS <image src="https://www.baidu.com/img/bd_logo1.png" />

二、使用分包

分包是将主包中的一些模块，单独打包成一个子包，这样就可以避免主包过大。因为主包是必须要加载的，所以可以将一些不常用的模块放到子包里面，这样就可以避免主包过大。pages.json 文件中，有一个 subPackages 字段，用于配置子包。
例如：

"subPackages": [
    {
      "root": "subpages/sub", // 子包的根目录
      "pages": [ // 子包的页面列表
        "subpage1", // 子包的页面路径
        "subpage2" // 子包的页面路径
      ]
    }
  ]

我们分包过后，就会导致子包里面组件无法在主包里面使用，需要使用占位组件，这在 uniapp 文档里面是没有的，需要在微信小程序官方文档里面查找。官方文档
列如：
pages.json 相关设置

"pages": [ // 主包的页面列表
    {
      "path": "pages/index/index", // 主包的页面路径
      "style": { // 主包的页面样式
        "navigationBarTitleText": "首页",// 主包的页面标题
        "componentPlaceholder": { // 主包的占位组件
           "subpage1": "subpages/sub/subpage1/subpage1", // 子包的占位组件路径
        }
      }
    }
  ]

index.vue 相关设置

<template>
  <view>
    <componentPlaceholder></componentPlaceholder>
  </view>
</template>
<script setup>
  import subpage1 from "subpages/sub/subpage1/subpage1"; // 子包的组件路径
</script>

三、打开上传代码时的代码压缩功能

在上传代码时，我们可以打开代码压缩功能，这样就可以将一些不需要的代码去掉，这样就可以减少主包的大小。
1、在 HBuilder 上面点击运行——>运行到小程序模拟器——>运行时是否压缩代码。
2、在 HBuilder 上面点击发行——>小程序——>发行——>小程序-微信(仅适用于 uni-app)(W)。

四、启用依赖分离功能

在上传代码时，我们可以启用依赖分离功能，这样就可以将一些不需要的依赖去掉，这样就可以减少主包的大小。

在 manifest.json 文件中，对应的 mp-weixin 字段中，添加以下配置：

"mp-weixin": {
    "optimization" : {
         "subpackages" : true
    }
    //其他配置
}