上海新闻综合频道今天seo技术306
分包目的在于提高小程序的体积,多一个包就多2M,最多20M
常规的分包:
小程序一打开首先加载主包,然后再加载分包
分包可以用主包内的资源,主包不可以使用分包的资源
分包A不可以使用分包B里面的内容
分包可以使用app.wxss里面的全局样式
分包步骤如下:
1.在微信小程序开发者工具里面打开在app.json中添加如下字段
root:是包的名称,pages:是添加的路径,independent:是设置独立分包
2.独立分包:
会在主包加载之前调用
独立分包属于分包的一种。普通分包的所有限制都对独立分包有效
主包中的app.wxss对独立分包无效,应避免在独立分包页面中使用 app.wxss 中的样式
给packageB设置成独立分包
uniapp分包小程序
分包步骤:
1.配置manifest.json
"mp-weixin": {
"optimization":{"subPackages":true}
}
优化分包:
在对应平台的配置(manifest.json)下添加"optimization":{“subPackages”:true}开启分包优化
目前只支持mp-weixin、mp-qq、mp-baidu的分包优化
静态文件:分包下支持 static 等静态资源拷贝,即分包目录内放置的静态资源不会被打包到主包中,也不可在主包中使用
js文件:当某个 js 仅被一个分包引用时,该 js 会被打包到该分包内,否则仍打到主包(即被主包引用,或被超过 1 个分包引用)
自定义组件:若某个自定义组件仅被一个分包引用时,且未放入到分包内,编译时会输出提示信息
2.配置pages.json
在pages.json中新建数组"subPackages",数组中包含两个参数:1.root:为子包的根目录,
2.pages:子包由哪些页面组成,参数同pages;
注意:主包和分包是不能再同一目录下,在构建uniapp项目时,可以考虑一下目录结构,以便后期进行分包;
3.分包预载配置(preloadRule)
做这一步主要为了优化速度,不想优化速度的可以跳过这个配置
配置preloadRule后,在进入小程序某个页面时,由框架自动预下载可能需要的分包,提升进入后续分包页面时的启动速度
preloadRule 中,key 是页面路径,value 是进入此页面的预下载配置,每个配置有以下几项:
app的分包,同样支持preloadRule,但网络规则无效。
举个粟子
"preloadRule": {"pages/baseurl/index": {"network": "all","packages": ["__APP__"]},""pages/baseurl/index": {"network": "all","packages": ["pages-ppc"]},...},