优维低代码LazyBricks

　　导语
　　优维低代码技术专栏，  是一个全新的、技术为主的专栏，由优维技术委员会成员执笔，基于优维7年低代码技术研发及运维成果，主要介绍低代码相关的技术原理及架构逻辑，目的是给广大运维人提供一个技术交流与学习的平台。
　　连载第四十期
　　《高级指引： Lazy Bricks 》
　　▽
　　在过去，一个构件包内的所有构件代码会打包输出到在同一个 JS 文件内，这可能导致页面渲染时会请求很多并不会用到的构件代码。另一方面，如果无限制地按单个构件拆分制品文件，则可能造成页面请求数爆发，这在 http 2.0 普及之前不可行，另外也可能造成构件之间的公共代码部分出现重复。
　　因此我们提供了 Lazy Bricks 的机制，开发者可以主动将指定的构件声明为 lazy bricks，这些构件在打包时将脱离该构件包的主文件，只在明确用到时才加载。同时，开发者可以将多个构件合并为一组，按组加载，以减少制品文件过于碎片化、以及公共代码重复的问题。
　　使用方式：在相关构件包的 src  目录下新增一个文件 lazy-bricks.yaml ：lazyBricks:   # 注意：不要带构件包名称的前缀   - ＂builder-container＂   - ＂event-config-form＂     # 也可以将多个构件合并为一组   - group: ＂function-debugger＂     bricks:       - ＂function-debugger-sidebar＂       - ＂function-debugger-toolbar＂       - ＂function-debugger-store＂       - ＂function-debugger-statusbar＂
　　然后重新打包该构件包即可。
　　⊙ NOTE
　　提示：尝试使用 source-map-explorer 来分析构件包打出来的 JS 文件的代码分布，并结合业务使用情况来配置 lazy bricks。
　　#  高级
　　上述配置包含一个隐含条件：相关构件的入口文件就在 src  目录下以构件名称命名的文件（或目录下的 index 文件）。如果不是，那么需要额外声明 entry  信息：lazyBricks:   - brick: ＂provider-get-statistics＂     # `entry` 为该构件入口文件相对于 `src` 目录的相对路径，可以不填写后缀的 `.ts` 或 `/index.ts`。     # 即：该构件需要能通过该方式引用：`import ＂./src/${entry}＂`     entry: ＂data-providers/GetStatistics＂     # 注意：对分组的构件同样适用