关于小程序分包的一些思考和Uiniapp分包优化逻辑的验证

有梦想，有干货，微信搜索【大千世界】关注这位凌晨还在洗碗的洗碗智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。什么是分包分包是指将一个完整的小程序项目按照需求分成不同的分包，在构建时打包成不同的分包，在用户使用时按需加载。分包的好处分包小程序的好处主要有：可以优化小程序第一次启动的下载时间，多个团队共同开发时可以更好的解耦和协同。包的uni-app目录结构如下：┌─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需要填写页面.json:{"pages":[{"path":"pages/index/index","style":{...}},{"path":"pages/login/login","style":{...}}],"subPackages":[{"root":"pagesA","name":"分包的别名""pages":[{"path":"list/list",“风格”：{。..}}]},{"root":"pagesB","pages":[{"path":"detail/detail","style":{...}}]}],}动手实践：https://github.com/qq44924588...运行后可以查看developerdetails查看分包信息：这样配置的目录结构真的好吗？按照官网的例子，如果我们要分两个包，需要在同级下创建两个目录pageA和pageBpages.这样划分真的好吗？假设我们有一个活动业务模板，对应的活动详情地址为/pages/activity/detailpages.json配置如下："pages":[{"path":"pages/index/index","style":{"navigationBarTitleText":"Homepage"}},{"path":"pages/activity/detail","style":{"navigationBarTitleText":"ActivityDetails"}}],随着业务的发展，这个模块的功能会越来越多。哪天我们要分包这个包的时候，如果按照之前的分包方式，如果我们在pages同级下创建一个分包目录，假设我们这里叫它pagesA，然后把对应activity模块的文件移动他们到该目录下，对应的pages.json配置如下："subPackages":[{"root":"pagesA","pages":[{"path":"activity/detail"}]}]在此time，对应的activity详情地址为/pagesA/activity/detail，会出现问题。此时活动明细的路径发生了变化，所以分包必须正常工作，必须改变之前的路径。如果有其他小程序跳转到详情页，也得修改。显然，这种分包结构是非常不可靠的。一个分包，需要修改多个文件，甚至多个小程序。那么如何解决这个问题呢？显然，只要路径不变，能正确分包，这个问题就可以解决。想到分包无非就是在subPackages中指定一个分包名，分包页面对应分包名下的文件。因此，我们可以将原页面下的模块指定为分包，这样配置就可以解决分包后路径不一致的问题。改写后的结构如下："subPackages":[{"root":"pages/activity","pages":[{"path":"detail"}]}]，示例地址：https://github。com/qq44924588...subpackagepreload分包预加载配置。配置preloadRule后，当进入小程序的某个页面时，框架会自动预下载可能需要的分包，以提高进入后续分包页面时的启动速度。假设我们有两个分包pagesA和pagesB。当我们进入详情页，想要预添加pagesA时，对应的配置如下：{"pages":[//pages数组第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path":"pages/index/index","style":{"navigationBarTitleText":"主页"}},{"path":"pages/detail/index",“样式”：{“navigationBarTitleText”：“详细信息”}}}]，“subPackages”：[{“根”：“pagesA”，“页面”：[{“路径”：“详细信息/索引”}]}，{"root":"pagesB","pages":[{"path":"detail/index"}]}],"preloadRule":{"pages/detail/index":{"network":"wifi","packages":["pagesA","pagesB"]}}}preloadRule中key为页面路径，value为进入该页面的预下载配置，packages为网络用于进入指定网络下预下载页面后预下载分包，可选值有：all（不限网络），wifi（仅在wifi下预下载）。示例地址：https://github.com/qq44924588...分包加载规则分包需要注意一件事：tabBar页面需要放在主包中，假设我们有两个tabBar，配置如下：{“页面”：[{“路径”：“页面/频道/索引”，“样式”：{“disableScroll”：真}}，{“路径”：“页面/成员/索引”，“样式”：{"disableScroll":true}}],"tabBar":{"color":"#BBBBBD","selectedColor":"#1C1C1C","borderStyle":"white","backgroundColor":"#ffffff",“list”：[{“pagePath”：“pages/channel/index”，“iconPath”：“static/tabbar_icon_channel.png”，“selectedIconPath”：“static/tabbar_icon_channel_active.png”，“text”：“仅限会员”},{"页面路径":"pages/member/index","iconPath":"static/tabbar_icon_member.png","selectedIconPath":"static/tabbar_icon_member_active.png","text":"Member"}]}}如果我们如果你将tabBar页面配置为subPackages，会报错：示例地址：https://github.com/qq44924588...分包优化在对应平台配置下添加"optimization":{"subPackages":true}启用分包优化分包优化具体逻辑静态文件：分包下支持static等静态资源副本，即放在分包目录下的静态资源不会被打包到主包中，js文件不能在主包中使用：当一个js只被一个子包引用时，js会被打包到子包中，否则还是会被打包到主包中（即被主包引用，或者被多个子包引用).自定义组件：如果一个自定义组件只被一个分包引用，并且没有放在分包中，编译时会输出提示信息。首先，让我们测试第一条规则。在首页创建相应的配置：{"pages":[{"path":"pages/index/index",}],"subPackages":[{"root":"pagesA","pages":[{"path":"detail/index"}]}],}这里，我们有一个分包pagesA对应一个详情页。详情页使用一张图片，放在当前包的静态文件下，内容如下：然后，我们开始打包，然后点击开发者工具详情，点击本地代码->依赖分析，可以查看打包的详细信息，如下图：是的看到了，我们点了主包下的static，但是我们的子包里面并没有用到test.png图片。相反，它被打包在自己的子包下。即放在子包目录下的静态资源不会被打包到主包中，它是成立的。接下来我们验证一下，如果在主包中使用分包的test.png图片会怎么样？重写我们主包的索引文件的内容：运行后控制台会报错：因此分包下支持static等静态资源的拷贝，即放在分包目录下的静态资源不会被打包到主包中，无法使用在主包中。示例地址：https://github.com/qq44924588...那么，我们来验证第二条规则：js文件：当一个js只被一个分包引用时，该js会被打包到分包中，否则还是命中主包（即被主包引用，或被多个子包引用）。首先，我们在主包的src/utils中创建一个common.ts，内容如下：exportconstadd=(a:number,b:number)=>{returna+b}然后，在子包pagesA导入用法：同样，打包，然后点击开发者工具的详细信息，点击本地代码->依赖分析：从上图可以看出，我们在vendor.js中没有找到src/utils主包/common.ts中的add方法，却在子包pagesA中找到。那么如果某个js被多个分包引用了怎么办？我们再创建一个子包pagesB，同样的方法在子包pagesB中导入common.ts：extend({created(){console.log(add(1,2))}})同样，package，然后点击开发者工具的详情，点击本地代码->依赖分析：从图中看，我们可以在主包中找到我们在vendor.js中使用的add方法，但是在分包中却没有找到对应的vendor.js，所以当一个js只被多个分包引用时，该js会被打包到主包。示例地址：https://github.com/qq44924588...最后验证一下第三条规则：自定义组件：如果自定义组件只被一个子包引用，并且在包中，编译时会输出提示信息首先，我们在主包中的src/components中创建一个自定义组件SayHello，内容如下：同样的方法（步骤同上例），在分包中引用我们的组件SayHello：然后编译后可以看到控制台提示信息：自定义组件被多个分包引用怎么办？提示应该消失。为了严谨起见，我们建一个分包pagesB来引用同样姿势的组件，然后编译，再查看控制台：可以看到提示信息已经消失了。至此，我们验证了UniApp官网Nice提到的分包优化的具体逻辑。案例地址：https://github.com/qq44924588...代码部署后可能存在的bug无法实时获知。之后为了解决这些bug，花费了大量的时间在日志调试上。顺便在这里给大家推荐一个很好用的BUG监控工具Fundebug。交流有梦想，有干货，微信搜索【大千世界】关注这位凌晨还在洗碗的洗碗智者。本文GitHubhttps://github.com/qq44924588...已收录，有完整的测试站点、资料和我的一线厂商访谈系列文章。