谁说uni打包失败？图片太大秒变小可爱！

前端

2023-10-17 22:45:15

征服微信小程序打包失败，一步步打造你的小可爱

作为一名 Uni 小程序开发爱好者，你是否曾为打包失败的窘境抓狂不已？别担心，今天我们将为你提供一系列秘诀，轻松搞定打包难题，让你的小程序瞬间绽放光彩！

1. 剖析打包失败背后的元凶

导致小程序打包失败的原因多种多样，但其中最常见的罪魁祸首当属 图片资源过大 。众所周知，图片会显著增加小程序的体积。因此，如果你的小程序中充斥着大量高清图片，打包时很容易触发 "包太大" 的错误提示。

2. 巧妙压缩图片，释放小程序空间

要解决图片过大的问题，我们有两种妙招：

（1）压缩图片资源

你可以利用在线工具或图片压缩软件对图片资源进行压缩，从而减小其体积。需要注意的是，压缩图片时要兼顾图片质量，避免影响小程序的视觉呈现。

（2）将图片资源存储在云端

将图片资源存储在云端，并通过网络请求的方式在小程序中加载图片，是一种有效减小程序体积的方法。这样一来，我们就能避免打包失败的难题。

3. 分包出击，化解体积困局

除了图片资源过大，分包也是解决打包失败的利器。分包是指将小程序的代码和资源分成多个部分，分别打包成不同的包。这种方式可以有效减小程序的体积，提高打包成功率。

分包的步骤如下：

创建一个名为 "pages" 的文件夹。
将小程序的页面代码和资源分别放入 "pages" 文件夹中的不同子文件夹中。
在 "pages" 文件夹中创建一个名为 "manifest.json" 的文件，并填写以下内容：

{
  "pages": [
    "page1/index",
    "page2/index",
    "page3/index"
  ]
}

在小程序的根目录下创建一个名为 "package.json" 的文件，并填写以下内容：

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "My awesome app",
  "dependencies": {
    "uni-app": "^2.0.0"
  },
  "h5": {
    "entry": "pages/index/index",
    "router": {
      "pages": {
        "page1": {
          "entry": "pages/page1/index"
        },
        "page2": {
          "entry": "pages/page2/index"
        },
        "page3": {
          "entry": "pages/page3/index"
        }
      }
    }
  }
}