微信拆包解析示例

本文附带的源码路径为：https://gitee.com/chelixiang/core-shop.git

官方开源代码路径为：https://gitee.com/CoreUnion/CoreShop.git

前言：拆包本质

拆包的本质，个人理解就是微信小程序不允许在一个文件夹下有太多的子页面。所以就需要把多的子页面文件夹，移动到pages文件夹下，移动到pages下后，原来pages.json的页面路径就发生了变化，需要同步修改确保路径被找到

1、微信代码分析及拆包总览

 

 

如上图：未拆分前，蓝色页面文件都在member目录下，导致pages/member文件夹超出小程序文件大小小于1.5M的规定。

所以对member的页面文件夹做拆分，拆出蓝色的七个子文件夹。

2、拆包示例

下图时未拆时，member文件夹下的各个模块

 

 

拆分方法如下图（拆法不固定，这只是其中一种）

左侧为拆解方法，右侧为移动文件夹后的展示效果。

以agent文件夹为示例：

新建对应的子文件夹目录memberAgent，创建完成后将member下的agent文件夹移动到memberAgent下即可，其他挪动参考agent

 

 

 

3、拆包后Pages.json文件修改

首先确保Pages里面有member的入口

 

 

然后在subpageages对象里面增加分包的配置

这里以memberOrder文件夹为例，memberOrder下有多个子文件夹，所以pages也就配置了多个页面的path，确保每个文件夹都被映射到。如下图

 

 

同时要从原来的pages/member这个分包对象中，删除已经不存在页面引用，否则报错而且也起不到分包的作用，member里面还是那么多文件，依旧会提示超过1.5M。如下图：

 

 

 

4、修改项目中其他地方对于member/agent及其他member/order等原来文件的路径引用

下图就是页面路由.js文件的部分修改，红色为原来的，绿色为修改后的路径

 

以下为其他页面中对member文件夹里部分文件的路径引用，也需要同步修改

其中 红色为旧的，绿色为新的

 

 

5、经过以上操作后，可以重新运行小程序查看效果，如果还有报错，可能是有未修改完的页面路径映射。如果没有报错，点击代码分析，查看分包后member的大小是否在规定范围内即可