uniapp vue3 微信小程序分包如何实现

在使用uniapp和vue3开发微信小程序时，如何实现分包功能？我已经按照官方文档配置了subPackages，但编译后主包体积仍然很大，部分页面没有被正确分包。请问具体需要修改哪些配置？分包后的路径引用和普通页面有什么区别？如何确保组件和静态资源也能被正确分包？

2 回复

在 pages.json 中配置 subPackages 字段，将页面路径放入子包目录。示例：

{
  "subPackages": [{
    "root": "sub1",
    "pages": [
      "pages/page1",
      "pages/page2"
    ]
  }]
}

注意主包不超过 2M，子包不超过 2M。


在 UniApp 中使用 Vue3 实现微信小程序分包，主要通过配置 pages.json 实现。以下是具体步骤和示例代码：

1. 配置 pages.json

在项目根目录的 pages.json 中添加 subPackages 字段，定义分包信息：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": { "navigationBarTitleText": "首页" }
    }
  ],
  "subPackages": [
    {
      "root": "subpackageA",
      "pages": [
        {
          "path": "pageA/pageA",
          "style": { "navigationBarTitleText": "分包A页面" }
        }
      ]
    },
    {
      "root": "subpackageB",
      "pages": [
        {
          "path": "pageB/pageB",
          "style": { "navigationBarTitleText": "分包B页面" }
        }
      ]
    }
  ]
}

2. 目录结构

确保项目目录结构符合分包规范：

项目根目录/
├── pages/
│   └── index/
│       └── index.vue          # 主包页面
├── subpackageA/               # 分包A根目录
│   └── pageA/
│       └── pageA.vue
├── subpackageB/               # 分包B根目录
│   └── pageB/
│       └── pageB.vue
└── pages.json

3. 跳转到分包页面

使用 uni.navigateTo 或 <navigator> 组件跳转：

<!-- 在 .vue 文件中 -->
<template>
  <view>
    <button @click="goToSubPage">跳转到分包页面</button>
  </view>
</template>

<script setup>
const goToSubPage = () => {
  uni.navigateTo({
    url: '/subpackageA/pageA/pageA'  // 路径以 / 开头，包含分包根目录
  });
};
</script>

4. 分包预加载

在 pages.json 中配置 preloadRule，提前加载分包：

{
  "preloadRule": {
    "pages/index/index": {
      "network": "all",
      "packages": ["subpackageA"]
    }
  }
}

注意事项：

  • 主包限制：主包大小不超过 2MB，整个小程序不超过 20MB。
  • 资源放置：分包内资源（如图片、组件）应放在分包目录内，避免主包体积过大。
  • 公共代码：重复工具函数可提取到主包，或使用 uni.requireSubPackage 按需引用。

通过以上配置即可实现分包加载，优化小程序启动速度和性能。

回到顶部