微信小程序分包加载使用

目录结构

在项目目录中创建pagesA,B,C分包。
├── components                # 封装的组件
├── images                    # 使用界面的图片
├── pages
│   ├── index                 # 项目的首页 跳转至相关使用的界面效果
├── pagesA                    # 项目分包A
│   ├── pages 
│   ├── pages ── index        # 项目分包A中的首页
├── pagesB                    # 项目分包B
│   ├── pages 
│   ├── pages ── index        # 项目分包B中的首页
├── pagesC                    # 项目分包C
│   ├── pages 
│   ├── pages ── index        # 项目分包C中的首页

在项目app.json中的配置

{
    "pages": [
        "pages/index/index"
    ],
    "subPackages": [
        {
            "root": "pagesA/pages",
            "pages": [
                "index/index"
            ]
        },
        {
            "root": "pagesB/pages",
            "pages": [
                "index/index"
             ],
        },
        {
            "root": "pagesC/pages",
            "pages": [
                 "index/index"
              ],
        }
    ],
    "preloadRule": {
        "pages/index/index": {
            "network": "all", //这个意思是在指定网络下预下载,可选值为:all: 不限网络 ;wifi: 仅wifi下预下载
            "packages": [
                "pagesA/pages",
                "pagesB/pages",
                "pagesC/pages"
            ],
        }
    },
    "usingComponents": {
    }
}

这样即可使用分包了 就是这么简单
然后在开发者工具可以查看所占的大小


1555233336(1).jpg

这是我开发中使用到的组件 如果有相关的功能可直接使用哦,喜欢的话start一下
https://github.com/QShengW/MPComponent

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 什么是分包? 在构建小程序的分包项目时候,构建会输出一个或者多个功能的分包。其中每个分包小程序必定会包含一个主包,...
    Gopal阅读 5,258评论 2 0
  • 前言 对于一个展示型的小程序而言,势必会存在着众多的图片来展示,而UI设计师给出的图片大多数都会很大,这样就会很大...
    熊猫饲养员文文阅读 5,821评论 3 6
  • 分包加载 背景 微信官方出于小程序的启动速度的考虑,对代码包的大小进行了限制。但是同样也限制了小程序功能的扩展,为...
    kll982982阅读 784评论 0 1
  • **2014真题Directions:Read the following text. Choose the be...
    又是夜半惊坐起阅读 9,786评论 0 23
  • rljs by sennchi Timeline of History Part One The Cognitiv...
    sennchi阅读 7,418评论 0 10