https://devopsnow-website-1251941469.cos.ap-guangzhou.myqcloud.com/public/1d91493eaeab4ca1d3c53979f19cdcb2.jpg


<section><section>导语
优维低代码技术专栏，是一个全新的、技术为主的专栏，由优维技术委员会成员执笔，基于优维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"    # 注意：对分组的构件同样适用





Uknow | 优维低代码：Lazy Bricks

https://devopsnow-website-1251941469.cos.ap-guangzhou.myqcloud.com/public/dd10a22a9d912d30d50109a15bd591c0.jpg


连载第三十八期
《高级指引：Legacy Templates 构件模板》
▽

随着业务规模的扩展，一些常用构件的配置开始变得复杂，Storyboard 的配置和编排的成本随之增加。为了解决这个问题，我们提供了构件模板的概念，将 Storyboard 中复杂的构件配置抽象并封装出一层构件模板，隐藏内部复杂的结构化配置，对外只暴露简洁的、必需的参数。

构件模板是 Storyboard 片段模板的一种，未来可能还会增加路由等其它内容的模板。

和构件包类似，我们在模板包中定义构件模板。

# 使用

使用方式参考 BrickConf。
例如，使用 layout.micro-app：




https://devopsnow-website-1251941469.cos.ap-guangzhou.myqcloud.com/public/487615eaf93adc2d497ed674c75fadc8.png

https://devopsnow-website-1251941469.cos.ap-guangzhou.myqcloud.com/public/9bd3ee67b834c58dde14d93640b4fba0.png



# 创建一个新的模板包
运行 yarn yo
选择 a new package of templates
输入模板包的 ID，例如 hello-world


# 创建一个新的模板
运行 yarn yo
选择 a new template
选择所在模板包，例如 hello-templates
输入模板的名称，例如 world-index


- end -



优维低代码：Legacy Templates 构件模板

https://devopsnow-website-1251941469.cos.ap-guangzhou.myqcloud.com/public/671cedd3ff16448b36e7dd947f5544e5.jpg


连载第三十九期
《高级指引：Use Provider Hook》
▽

useProvider Hook 可调用FlowApi生成的后台 API 接口，需要在 React Functional Components 中使用。

# 基本用法

Hook 运行在 onMount / componentDidMount 时。最后一个参数[]意味着它将运行 onMount，如果您将变量传递给它[someVariable]，它会在更改值 onMount 时再次运行。



https://devopsnow-website-1251941469.cos.ap-guangzhou.myqcloud.com/public/84cd7efe5e67a3a5bf97302355a25f87.png

https://devopsnow-website-1251941469.cos.ap-guangzhou.myqcloud.com/public/3a21080b0f569036af126c735b8e0b06.png

https://devopsnow-website-1251941469.cos.ap-guangzhou.myqcloud.com/public/222927acc41f9a962e46ad3d4eb92eeb.png

https://devopsnow-website-1251941469.cos.ap-guangzhou.myqcloud.com/public/d344d50810acf33afe679bd34edf8de9.png

https://devopsnow-website-1251941469.cos.ap-guangzhou.myqcloud.com/public/2e529861856166f978b0396697edf307.png

优维低代码：Use Provider Hook

优维低代码技术专栏，是一个全新的、技术为主的专栏，由优维技术委员会成员执笔，基于优维7年低代码技术研发及运维成果，主要介绍低代码相关的技术原理及架构逻辑，目的是给广大运维人提供一个技术交流与学习的平台。

赋能 DevOps：平台工程的关键作用

开发者图鉴 | 日常生活中常用的数据结构有哪些？

优维（应用）数字化架构管理：让企业运维天堑变通途

为什么GraphQL是构建微服务的更好选择？

开发者图鉴 | 云成本降低技术

重磅！优维科技发布EasyOps7.0大版本

2024 年云繁荣：驾驭人工智能驱动转型浪潮

开发者图鉴 | 8种流行的网络协议

优维全面可观测产品能力分解⑦：资源可观测

罗马不是一天建成的：DevOps 转型分步指南

优维科技Easy DevOps全栈运维平台国产化认证5连击

金融行业| 光大银行打造智能化运维支撑数字化业务运营

云智一体|产业类客户案例解析

IT资源轻松管理！优维架构&模型视图上线啦！

案例｜优维＆百丽打造传统行业统一运维平台

案例| 优维&东莞银行打造自动化运维平台

UGeek大咖说第十二期 | 大咖云集：可观测性的应用创新与落地研讨会

涨知识| 什么是个人碳账户？如何使用？

UGeek大咖说第十一期 | B站：以SLO为核心的可用性观测与质量运营

优维案例|智慧监狱优维一体化管控平台解决方案