原生小程序小话题——按需载入、占位组件、骨架屏

第一部分 按需加载

通常情况下启动小程序，小程序的页面和包会全部载入，很耗时，对于一些性能不足的机器也不友好（比如我的老手机），这时候可以使用按需加载，就是懒加载，开启懒加载的方式也非常简单，直接在app.json当中添加如下字段就可以了。

  "lazyCodeLoading": "requiredComponents"

按照官网的说法，该页面配置文件中的usingComponents字段中所有的组件，包括app.json中的全局引入的组件都会被加载。

第二部分 用时注入

用时注入前提一定是开启了按需加载，即使主要讲的就是占位组件，这个占位组件其实有点类似于骨架屏，或者react当中的suspense的用法，就是一个在组件加载好之前的placeholder，我们实验一下。

首先肯定是在app.js的页面开启按需加载，开启这个选项之后，每次重新编译的时候，你是可以在调试器的console部分，看到这行字的

VM1062 WAService.js:1 [system] LazyCodeLoading: true

然后我们要写一个占位组件，我们这里叫placeholder

<view class="red">爷今天就占这个位子了</view>

很简单，我们还加上了红色字体，生怕组件加载太快，占位组件一闪而过，不太好辨识，随后我们在主要页面的json部分引入你的组件和对应的占位组件，并用如下字段确认这种对应的关系

 "componentPlaceholder": {
    "com-test7":"placeholder"
  }