uni-app 小程序启用分包"subPackages": true后主包体积未变小求解答

发布于 1周前 作者 bupafengyu 来自 Uni-App

uni-app 小程序启用分包"subPackages": true后主包体积未变小求解答

Image

Image

Image


1 回复

在 uni-app 中启用分包功能 ("subPackages": true) 旨在将小程序的应用代码拆分成多个包,以便减小主包的体积,提高加载速度和用户体验。如果你发现启用分包后主包体积未变小,可能是由于以下几个原因:

  1. 配置不当:检查 pages.json 配置文件中的分包配置是否正确。确保将不常用的页面或资源移动到了分包中。

  2. 静态资源未正确拆分:如果主包中包含了大量静态资源(如图片、视频等),这些资源未被正确拆分到分包中,也会导致主包体积过大。

  3. 公共代码未被优化:如果主包和分包中都有引用到相同的库或模块,而这些库或模块没有被优化(如通过代码分割或外部链接引入),也会增加主包的体积。

以下是一个正确的分包配置示例,以及如何在 pages.json 中进行配置:

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
    // 主包中的其他页面...
  ],
  "subPackages": [
    {
      "root": "pages/subpkg1/",
      "pages": [
        {
          "path": "page1",
          "style": {
            "navigationBarTitleText": "分包页面1"
          }
        },
        {
          "path": "page2",
          "style": {
            "navigationBarTitleText": "分包页面2"
          }
        }
      ]
    },
    {
      "root": "pages/subpkg2/",
      "pages": [
        {
          "path": "pageA",
          "style": {
            "navigationBarTitleText": "分包页面A"
          }
        }
      ]
    }
  ],
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}

确保你的静态资源(如图片、视频)也被放置在相应的分包目录下,并在页面中正确引用。例如,如果 page1 需要引用一张图片,应将图片放在 pages/subpkg1/static/ 目录下,并在 page1 的代码中通过相对路径引用。

此外,考虑使用外部链接引入一些公共库,如通过 CDN 引入 Vue.js 或其他框架库,以减少主包中的代码量。

如果以上步骤都正确无误,但主包体积仍然未变小,可能需要进一步检查代码中是否有不必要的资源或代码被错误地包含在主包中。使用工具如 Webpack Bundle Analyzer 来分析打包结果,找出体积大的部分并进行优化。

回到顶部