支付宝开发者日讲师小翊曾介绍了两项小程序开发新能力：插件静态懒加载以及占位组件。今天，我们将邀请小翊来深入讲解一下这两项新能力——对开发者而言有何价值，如何使用以及接入过程中的注意事项。
学会偷“懒”,提升页面打开速度
小翊：聊“静态懒加载”的产品价值前，需要先回顾一下插件加载的两种方式：
① 静态加载：也就是让小程序包和插件代码包一起下载，如果使用插件数量过多，会影响启动性能，并且加载过程任何一个包下载失败，都会导致小程序无法启动，这是静态加载的缺点。
② 动态加载：对此我们推出动态加载方式，让部分关键插件可以和小程序包一起下载，另一些则在使用时再动态进行下载，由此优化了页面加载体验，但动态加载的开发体验不好，代码逻辑复杂。
我们想，是否有将二者优点结合的方式，“静态懒加载”应运而生。
“静态懒加载”的产品价值是：在静态加载的较为简单的配置方式下，也能实现异步加载功能，提升页面加载效率。
具体来说，通过“静态懒加载”功能，我们可以将所有的插件都后置加载，打开页面时只要下载小程序本体的代码包即可。
同时，开发者也可以配置指定插件的预加载，提前下载插件包，在实际使用时体感更好。
如果你没有配置预加载，只是在静态插件声明的基础上开启了懒加载，那么就会在实际使用到插件时，自动下载插件包。
由此一来，哪些插件应提前加载，哪些用到时再下载，都由开发者根据业务情况决定。
就好比现在很火的新能源汽车，你可以选择手动驾驶，在“关键路段”由自己自定义操作，也可以选择在安全性高，不紧要的路段开启“自动驾驶”，交给机器来判断、运行，增加了插件加载的灵活程度。
配置方式：在现有静态声明基础上，新增 lazy 标识以及preloadRule字段即可，代码如下：
{ "plugins": { "lazyPlugin": { "lazy": true, // 开启懒加载模式 "version": "*", // 目前只支持设置 * ，自动选择版本 "provider": "2021003126623373" } }, // 配置懒加载插件预加载 "preloadRule": { "pages/index/index": { "network": "all", "plugins": [ "lazyPlugin" ] } } }
同时，各位开发者可在“支付宝开发助手”小程序中找到“小程序官方示例”体验使用了“静态懒加载”的小程序。
打开路径：扫描下方二维码或上支付宝搜“开发助手”。
自动检测，“占”据先机
说完静态懒加载，开发者肯定会有疑惑：“静态懒加载”模式下，当插件还未下载完成时，页面上该如何显示？
针对这个问题，我们推出了“占位组件”，“静态懒加载”和“占位组件”组合使用的优势在于：
① 可以在插件未下载完成时，用占位组件内容代替渲染。
② 使用方式比动态加载更加简单易用：上述问题在动态加载模式中也会出现，一般处理办法是使用components.is的组件辅助渲染，同时需要开发者自己定义的标记位来说明插件是否加载完成，当加载完成后，把标记位标为true，才是真正完成插件组件的渲染。
这种模式中，标记位只对当前页面生效，如果多个页面都使用了相同插件组件，需要多次重复这一过程，非常繁琐。
而通过“占位组件”，框架就会在渲染到插件组件时，自动检测插件是否下载完成，如果没有下载完成，则用占位组件的内容来填充，然后由框架来发起插件的下载请求。
配置方法：只要在usingcomponents里声明插件组件的同时，声明占位组件，并且在componentplaceholder的属性里做一个关联即可。代码如下：
{ "usingComponents": { "lazy-plugin-hello": "plugin://lazyPlugin/hello", "hello": "/components/hello" }, "componentPlaceholder": { "lazy-plugin-hello": "hello" } }
我们希望这些新特性，可以让插件使用更加简单，提升大家的开发体验。
注意事项
最后，想使用以上能力有一些固定的限制：
- 小程序基础库 >= 2.7.18
- IDE版本 >= 3.0.0
- 想使用预加载功能，需要支付宝版本 >= 10.2.63 才会生效
以上就是插件静态懒加载以及占位组件的解读，各位开发者有相关问题可在下方回帖，或在小程序“支付宝开发助手”里提出。
