使用uniapp开发小程序（分包处理）

最新推荐文章于 2024-07-21 21:10:39 发布

～蓝桉

最新推荐文章于 2024-07-21 21:10:39 发布

阅读量1.9k

点赞数 20

文章标签： uni-app 小程序前端

本文链接：https://blog.csdn.net/weixin_62639453/article/details/135910564

版权

本文介绍了在uniapp开发微信小程序时，为何要进行分包以及其作用，包括降低首次加载时间、按需加载、团队协作和开发效率提升。详细讲解了如何在HBuilderX中设置分包，并强调了分包操作、注意事项，如文件依赖、资源路径、性能优化等。

摘要由CSDN通过智能技术生成

使用uniapp开发小程序，在上传代码进行提交审核发布，会涉及到一个问题，就是小程序的大小有限制，不通过代码审核就发布不了。而分包是优化你代码大小的其中之一。

一、为什么要进行分包

首先，他受微信小程序的限制（不得不进行分包）：

基础能力 / 分包加载 / 使用分包 (qq.com)

在开发小程序时，分包可以帮助开发者更好地管理和优化小程序的代码结构和加载性能。

二、分包有什么作用

降低首次加载时间：将较少使用的页面或组件放入分包中，可以减少主包的体积，从而加快小程序的首次启动速度。
按需加载：分包可以按照需求进行加载，避免一次性加载所有页面和组件，提高了小程序的运行效率和响应速度。
方便团队协作：在大型项目中，可以根据功能模块将相关的页面和组件放入不同的分包中，便于团队协作和管理。
提高开发效率：通过分包可以更好地组织代码结构，使得开发、维护和调试更加清晰和高效。

总之，分包可以帮助优化小程序的性能，提高开发效率，并使得项目结构更加清晰和灵活。

三、进行分包操作

我使用的是HBuilder X+微信小程序开发者工具进行开发。

1.首先在manifest.json中添加这段代码，开启分包。

"optimization": {
      "subPackages": true
    }

2. 对pages下面的页面进行处理。

pages页面一般存放启动页面和tabbar页面。

这是我的文件目录：

pages用于存放tabbar页面：

pagesA用于存放分包的页面，你起多少个分包都无所谓，到时候在pages里面的配置写对就行了。

这是我pages.json文件的配置：

{
  // pages用于存放主包里面的东西一般包括启动页面,tabbar页面
  "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "uni-app"
      }
    }, {
      "path": "pages/message/message",
      "style": {
        "navigationBarTitleText": "",
        "enablePullDownRefresh": false
      }

    }, {
      "path": "pages/my/my",
      "style": {
        "navigationBarTitleText": "",
        "enablePullDownRefresh": false
      }

    }
  ],
  // 存放分包下的页面
  "subPackages": [
    {
      "root": "pagesA",
      "pages": [
        {
          "path": "page1/page1"
        }
      ]
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  },
  "uniIdRouter": {},
  "tabBar": {
    "list": [{
      "text": "",
      "pagePath": "pages/index/index",
      "iconPath": "static/image/tabbarImg/chat.png",
      "selectedIconPath": "static/image/tabbarImg/chat-active.png"
    }, {
      "text": "",
      "pagePath": "pages/message/message",
      "iconPath": "static/image/tabbarImg/clock.png",
      "selectedIconPath": "static/image/tabbarImg/clock-active.png"
    }, {
      "text": "",
      "pagePath": "pages/my/my",
      "iconPath": "static/image/tabbarImg/my.png",
      "selectedIconPath": "static/image/tabbarImg/my-active.png"
    }]
  }
}

如果有多个分包，按照这样写就行（也是官方的）：

基础能力 / 分包加载 / 使用分包 (qq.com)