下面我们看实践二，商品页独立分包。
接下来我们将这个商品页配置为一个独立分包。实现独立分包也很简单，我们只需要在分包配置节点下面添加一个independent等于true这样的一个配置就可以了，在商品详情页成为独立分包的页面以后可以看到tab-bar组件，它可能已经看不到了，这是因为它在全局主包里面进行配置和加载的，此时主包它还没有加载，所以在这个地方它看不到。
还有在这个页面上可能会自动显示一个返回主页的这样的一个按钮，用户单击这个按钮以后，可以向主页进行跳转，使用独立分包以后对逻辑层代码也有影响，其中的一个影响就是在我们使用getApp接口的时候取不到全局的应用实例了，但是为了使这个程序不出Bug 不出问题，小程序允许我们在独立分包中为全局的App定义默认的参数以及默认的内容，这些信息它默认是在App里面被设置的，但是并不是所有的这些信息都会在独立的页面里面，也就是在商品的详情页里边用到，在这个地方我们也可以只定义我们自己需要的一个信息，例如稍后我们会看到在我们这个项目里面，其实我们只是用了一个StatusBar这样的信息，我们只定义这一个信息也是可以的，为了方便在模拟器里面测试独立分包这个页面，我们可以自定义添加一个新的编译样式，不同的编译样式方便我们直接测试不同的一个页面。
现在我们进行实践二的代码演示。
实现这个商品页的独立分包与我们前面的用户主页的一个独立分包很像，首先我们将这个页面从pages这个节点下面给它删掉，不需要它在主包里面进行存在了，第二步就是我们在分包设置下面subpackages下面添加一个新的对象，然后root我们要写goods，这个goods它是我们这个项目底下真实存在的一个目录，在这个地方再往下就是我们要填写页面地址，我们只需要去写这个里边有的页面地址，就是page这个地址就可以了，至于这个目录下面它有其他的一些文件，比如说像我们这个goods下面有一个colorui，像这个目录其实不需要在我们的配置里面进行定义，我们只需要定义到root根节点，然后它其他的内容也会随着我们这个页面整体配置一同的被打包，然后打到分包里面去，除了这个配置以后我们要实现它的独立分包，还要加上一个新的配置independent，加上这样一个配置，然后设置为true，就是独立的意思，那么加上以后就代表它是一个独立分包了。
我们现在goods也就是我们这个商品详情页已经是一个独立分包里面的页面了，我们在测试的时候其实可以拿我们商品详情页作为启动地址，拿它作为启动地址的写法我们也需要注意前面这个我们要写我们分包的root，后面然后加上分包里面的页面地址，两者之间然后加起来就是一个启动地址了。
现在我们单击编译按钮 然后测试一下看它的一个表现。不出意外的话，这个地方会报错对吧，我们看一下错误信息，从这个地方可以单击进去，是我们页面里边大概是在这个位置对吧，getApp它其实没有取到，它里面还要取globalData更取不到了，因为本身getApp就没有取到，这个地方就涉及到一个独立分包里面，对我们全局的程序实例怎么样通过getApp去获取，我们找到我们商品详情页，找到这个页面，然后找到我们上面的代码，在这个地方我们可以加参数 allowDefault 加这个以后，其实相当于是我们允许定义默认的一个内容，这个代码之前已经写好了，我们看一下最终的一个代码是什么样子的。
这就是我们的一个代码，然后allowDefault要设置为true，这是我们默认代码 把它拷贝一下把这个参数设置为true，接下来我们就可以去定义了，然后再定义它的globalData等于这些信息，定义完了以后在这个地方我们就可以去访问globalData StatusBar 然后这个数值是40，所以最终的值就是40+6，我们在这个地方我们设置了默认的信息，当我们从独立的分包页面跳到主页面的时候，这个时候我们主包与主页面它也会加载，在这个时候小程序它会帮我们把我们在这个地方定义的这些信息，默认的这些信息和我们程序里面原本就有的信息，进行一个Mix 一个合并，合并以后，作为合并之后的整体的globalData这样的信息进行存在，所以一般情况下，在我们独立分包的独立页面里面，我们不需要的信息可以不定义，因为在这个页面里面实际上只依赖于一个StatusBar这样的信息，所以在这个地方我们只需要定义一个就可以了，其他的可以不去定义。
然后等到主页的时候，这个信息会和版本的信息合并，程序也不会出错，这是这样的一个代码 修改完了我们再编译一下，看它的一个运行时表现，现在已经没有问题了对吧。但同时我们也看到另外的一个现象，就是我们下面的tab-bar导航已经看不到了，为什么看不到了，因为前面我们提到了它作为一个独立的分包，这个时候它被加载的时候，其实主包以及主页面还有其他页面其实是不加载的，所以包括主包里边的tab-bar组件它也是不加载的，所以在这个地方我们看到这个不显示对不对，它不显示我们这个里面还有一项关于tab-bar组件的一个代码，是不是还记得就这个地方我们不是之前加了一个问号了，我们把问号给它删掉，删掉我们再测试看它的一个表现。
调试区出现了红色，Cannot read property select of null，无法在一个null的空对象上访问它select这个方法，啥意思，就是我们这个组件没有查到，这个组件是空的，所以我们这个地方如我们前面所述这个地方最好是加一个问号，万无一失 ，加了个问号以后它如果发现是null，它后面就不执行了，然后你这个代码也不会出错，这个代码演示我们就说到这里。
下面我们看实践三，分包预加载。
分包预加载也是通过配置来完成的，我们在独立分包goods里边，假设用户他在访问这个页面以后，他想单击主页然后看这个主页的话，这时候我们可以在goods分包里面开启对主包的一个分包预加载、提前加载，方便用户的后续的一个快速访问，那么怎么样开启，我们只需要在app.json配置文件里面添加一个preloadRule这样的一个配置，在这个配置节点里面以这个页面地址做key，设置对哪些分包做一个预加载，这个地方我们要注意页面路径的一个写法，它等于分包的root字段加上pages里边的路径，和这个代码里面使用的页面地址是不一样的，和配置里面的页面地址是一样的，它仍然是不带斜杠前缀的一种写法，开启分包预加载以后，在调试区我们可以看到相应的名称，包含了一个叫做preloadSubpackages这样的一个加载提示，在这个里面我们可以看到有一个提示里面会包含__APP__这样的信息，这个地方__APP__其实表示的就是主包。
现在我们进行实践三的代码演示。
目前的配置我们再看一眼，目前的配置里面goods也就是我们商品详情页所在的分包，它里面有一个independent属性等于true，它是一个独立分包，我们在这个分包加载运行的时候，我们想开启对主包的一个预加载，这种情况下我们可以去加另外的一种配置，preloadRule就是预加载的一个配置码，然后这个地方我们要用我们这个页面做key，这个页面我们要先写分包的root加上斜杠，然后再加上分包里面的页面的地址，这是一个全地址的写法，用它来做key 然后再写一个对象，写个对象以后，这个里边我们要写什么，一共是两个字段，一个是network，network就是网络，我们可以选all或者是wifi ，选all的话就是所有的网络环境我们都可以预加载，选wifi的话 只有在WiFi的这种情况下才会预加载。
还有一个是packages，packages它是一个数组，代表的是我们在这个页面运行的时候展开对哪些分包的一个预加载，这个地方我们可以写这个上面的一些分包 user还有这个examples都可以写，除了这些以外我们还可以写一个__APP__，这个就代表主包，它是主包的一个特有的名字，写到这里就可以了，这样就开启了分包的一个预加载了，现在我们再单击一下编译按钮来看一下它的一个加载提示，页面加载完了对吧，然后这个地方我们可以看到有一个preloadSubpackages，然后内容是__APP__，这是一个预加载提示，这说明我们预加载的配置已经成功了 对吧，代码演示我们就说到这里。
最后我们总结一下，小程序默认的tabBar以及通过app.json配置文件配置的自定义tabBar都要求图标必须放在本地，不能进行网络化，再加上tabBar页面只能使用wx.switchTab接口进行跳转等等这些原因，tabBar导航栏最好是使用自定义的这种方式去实现，所有在项目根目录下的子目录以及文件如果没有被分包瓜分的话，默认都会打包到主包里面，包括app.json中启用的全局插件 组件及第三方的类库等等这些也都会打包到主包里边，所以主包一般情况下只放一个首页以及基础的不能再基础不能再删减的内容，像其他的这些页面其他的这些自定义组件，在分包实践里面完全可以移到分包里面去。对于分包的一个配置只需要指定一个root目录，该目录下所有的文件它都会自动被分割到这个分包里面，对于准备在微信中分享的相对独立的页面，准备在微信里 微信群 朋友圈 然后分享传播的这些页面适合定义为独立分包，独立分包有返回主页的按钮，如果用户对当前这个产品他感兴趣，他返回首页的几率会比较大，所以在这种情况下，一般我们在独立分包里面设置对主包的一个分包预下载，这节课就讲到这里，上面的网址是本课所涉及的文档地址。
点击查看开放文档：
这节课我们主要学习了分包 独立分包以及分包预下载，还学习了如何通过完全自定义的这种方式实现tabBar导航栏。下节课我们继续优化独立分包goods，使用占位组件删除不必要的一些文件，将代码包体积进一步的减小，对于准备随时用于社交传播的页面，它代码包的体积是越小越好。
最后我们看一下思考题：这里有一个问题请你思考一下，对于这个页面上的某个复杂的组件，如果一直等待它把这个数据加载完并完成渲染 可能需要很长的一个时间，这将阻碍这个页面整体的一个渲染进度。那么有没有一种方法可以先给组件渲染出一个大致的方块 轮廓，等这个页面加载完成以后再来处理这个页面的渲染，这个问题先留给你思考一下，下节课我们一起来深入探讨一下这个问题。
啥也没说