目录
前言
发现目前网络上对于uni-app的小程序分包详细介绍的文章来说大部分都是存在问题的,没办法打包,就算是打包也不能使用,主要原因还是因为所使用的第三方包版本升级,uni-app的版本升级。
通过对官方文档的学习,发现现在的分包无需那么复杂可以简单的实现。
提示:以下是本篇文章正文内容,下面案例可供参考
一、根据官方文档说明
subPackages
分包加载配置,此配置为小程序的分包加载机制。
因小程序有体积和资源加载限制,各家小程序平台提供了分包方式,优化小程序的下载和启动速度。
所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本;而分包则是根据pages.json的配置进行划分。
在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,会把对应分包自动下载下来,下载完成后再进行展示。此时终端界面会有等待提示。
二、如何配置
1.项目目录
目录结构如下(示例):
┌─pages
│ ├─index
│ │ └─index.vue
│ └─login
│ └─login.vue
├─pagesA
│ ├─static
│ └─list
│ └─list.vue
├─pagesB
│ ├─static
│ └─detail
│ └─detail.vue
├─static
├─main.js
├─App.vue
├─manifest.json
└─pages.json
我们创建的包A和包B,同时每个包目录里面可以创建静态文件的目录static,这点很重要我们这样子创建的话就可以不用再配置copy-webpack-plugin打包静态文件了,因为这个容易出问题。
2.开始配置pages.json
代码如下(示例):
{
"pages": [{
"path": "pages/index/index",
"style": { ...}
}, {
"path": "pages/login/login",
"style": { ...}
}],
"subPackages": [{
"root": "pagesA",
"pages": [{
"path": "list/list",
"style": { ...}
}]
}, {
"root": "pagesB",
"pages": [{
"path": "detail/detail",
"style": { ...}
}]
}]
}
这样配置就可以了,页面的路径还是要带上包名如:/pagesA/list/list才能进行访问
总结
网上很多使用 copy-webpack-plugin 插件包进行小程序分包的插件不是很好用,修改 copy-webpack-plugin 版本为5.0后是不会报错了但是同样没生效,静态文件还是没有打包进去。
建议不必使用这个插件可以直接采用这种形式进行分包就可以了
同时注意多个包使用到的公共静态文件最好是放一个地方就可以,不必重复打包
扩展
preloadRule
分包预载配置。
配置preloadRule后,在进入小程序某个页面时,由框架自动预下载可能需要的分包,提升进入后续分包页面时的启动速度
"preloadRule": {
"pagesA/list/list": {
"network": "all",
"packages": ["__APP__"]
},
"pagesB/detail/detail": {
"network": "all",
"packages": ["pagesA"]
}
}