普通页面分包(按tabbar进行分包)

注意事项:

  • tabbar 应用的页面需要在主包
  • 如果有登录注册页面要在主包
  • 被多个tabbar引用的组件或是页面要写到主包
  • 待续

静态文件分包

  1. 在分包路径下新建static文件夹
  2. 将需要引用的文件放入
  3. 在页面引用/分包名/static/文件名

mainfest.json 中的配置

"mp-weixin" : {
        "appid" : "",
        "setting" : {
            "urlCheck" : false,
            "es6" : true,
            "minified" : true
        },
        "usingComponents" : true,
        "permission" : {
            "scope.userLocation" : {
                "desc" : "你的位置信息将用于小程序位置接口的效果展示"
            }
        },
        "optimization" : {
            "subPackages" : true // 开启分包优化
        },
        "plugins" : {},
        "packOptions" : {
            "ignore" : [
                {
                    "type" : "folder",
                    "value" : "static/use4pack"// 忽略打包到小程序的文件路径
                }
            ]
        }
    },
    "app-plus" : {
        
        "optimization" : {
            "subPackages" : true // 开启分包优化
        },
        "runmode" : "liberate", // 开启分包优化后,必须配置资源释放模式
        "modules" : {
            "VideoPlayer" : {},
            "Webview-x5" : {},
            "Share" : {},
            "Messaging" : {}
        },
        .....................
     }

pages.josn 配置分包及预加载

//分包
"subPackages": [{
			"root": "pagesMy",//分包名
			"pages": [{
					"path": "my/xxxx/xxx",
					"style": {
						"navigationBarTitleText": "某一页面"
					}
				},
				{}]
		 }],
//配置预加载
"preloadRule": {
		"page/midPage/midPage": {//登录到的首页预加载全部,貌似支持不太好
			"network": "all",
			"packages": ["__APP__"]
		},
		"page/my/newIndex/newIndex": {//进入到page/my/newIndex/newIndex 预加载pagesMy
			"network": "all",
			"packages": ["pagesMy"]
		},
		
	}

项目目录结构

目录结构

组件分包待续…

参考

分包
预加载
分包优化

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐