首先说分包
uniapp分包的方法在开放文档里有,有基础的小伙伴就可以看懂
打开 manifest.json源码视图,在对应平台的配置下添加 “optimization”:{“subPackages”:true} 开启分包优化
"optimization":{"subPackages":true}
然后 我们在根目录下创建一个pagesB文件夹,用来放置需要分包的页面
下一步是把比较大的文件直接拉过去,pages里就没有这个文件了,然后配置路由
path里不需要添加前缀/pagesB
"subPackages": [{
"root": "pagesB", //文件夹名称, pages文件夹同级新建一个就行
"pages": [
{
"path" : "line_otem_detail/line_otem_detail", //不需要添加前缀/pagesB
"style" : {
"navigationBarTitleText": "确认订单"
}
},
]
}],
它和pages里的路由地址的差距就是没有前缀
两个包的页面分开了,想要联系怎么办?
需修改路由跳转的路径即可 比如pages里的某个文件要跳转到pagesB里的某个文件,需要精确查找
"/pagesB/line_otem_detail/line_otem_detail"
下面是分包预加载
就是说进入那个页面的时候就开始加载某个包文件
"preloadRule": {
"pages/index/index": { //进入首页加载B包数据,不建议放在首页,首页加载慢
"network": "all",
"packages": ["pagesB"]
}
},
all是不限制网络,packages是加载的包名
就这么简单,分包就完成了
进入微信开发者工具,左上角详情,基本信息,本地代码点开就可以看到了
vendor.js过大怎么办?
vendor.js打包的是所有主包内容,包括插件,如果分包还是大,找到在主包没有用到,但是分包用的插件,(整个组件全部)拉到分包内,这个时候需要import引入组件使用,并且修改组件内源代码的引用路径
然后是压缩
使用运行时压缩代码,大概减小一倍
HBuilderX创建的项目勾选运行–>运行到小程序模拟器–>运行时是否压缩代码
cli创建的项目可以在pacakge.json中添加参数–minimize,示例:“dev:mp-weixin”: “cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize”
压缩大概可以压一倍左右,所以我建议先压缩运行,再分包