导语
优维低代码技术专栏,是一个全新的、技术为主的专栏,由优维技术委员会成员执笔,基于优维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"
# 注意:对分组的构件同样适用
有疑问加站长微信联系(非本文作者)
入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:692541889
关注微信- 请尽量让自己的回复能够对别人有帮助
- 支持 Markdown 格式, **粗体**、~~删除线~~、
`单行代码` - 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
- 图片支持拖拽、截图粘贴等方式上传
收入到我管理的专栏 新建专栏
导语
优维低代码技术专栏,是一个全新的、技术为主的专栏,由优维技术委员会成员执笔,基于优维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"
# 注意:对分组的构件同样适用