uniapp 微信小程序配置分包，多个分包

最新推荐文章于 2025-04-17 15:22:29 发布

徐飞不会喝酒

最新推荐文章于 2025-04-17 15:22:29 发布

阅读量2.3k

点赞数

分类专栏：微信小程序文章标签：微信小程序 uni-app 小程序

本文链接：https://blog.youkuaiyun.com/weixin_61243175/article/details/126893142

版权

微信小程序专栏收录该内容

14 篇文章

订阅专栏

本文介绍了小程序分包的配置方法和目的，旨在减少项目体积，提高启动速度，并便于后期维护。核心内容包括创建分包目录、在pages.json中声明分包结构以及设置分包加载规则。通过实例展示了如何在不同页面预加载分包，以实现更高效的小程序管理。对于大型项目，合理配置分包能显著提升开发和合并项目的效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

配置小程序分包的目的：

减少项目的体积，可以减少小程序首次启动时的加载时间。不用担心主包过大无法上传和打包小程序项目

在实际的项目开发中，tabBar 相关的页面是必须放在主包下的。其他的一些大型页面呢通常是建议你放在分包下面。

无论如何在创建一个工程化的小程序项目的时候都建议大家配置一个分包，这样的好处就是方便大家在以后维护的时候避免一些不必要的麻烦。例如公司有多个小程序需要合并（我的真实经历）！这个时候分包的作用就显而易见了。如果项目特别大，可以像我一样自行配置多个分包！那么废话不多说，直接开始：

在项目根目录中，创建分包的根目录，命名为 pagesA（自定义，通常叫subpkg）
在 pages.json 中，和 pages 节点平级的位置声明 subPackages 节点，用来定义分包相关的结构：

{
  "pages": [
    {
      "path": "pages/home/index",
      "style": {}
    },
    {
      "path": "pages/content/storeIndex",
      "style": {}
    },
    {
      "path": "pages/appointment/index",
      "style": {}
    },
    {
      "path": "pages/my/index",
      "style": {}
    }
  ],
  "subPackages": [
    {
      "root": "pagesA",
      "pages": [{
           //...
        }]
    },
    {
      "root": "pagesB",
      "pages": []
    }
  ]
}

3.最后我们可以在 subPackages 同节点下自定义分包的加载规则 preloadRule

	"preloadRule": { //分包加载规则
		"pages/home/index": { // 在index页面加载分包
			"network": "all",
			"packages": ["pagesA"]
		},
		"pages/content/storeIndex": {
			"network": "all",
			"packages": ["pagesB"]
		},
		"pages/my/index": {
			"network": "all",
			"packages": ["pagesB"]
		}
	},