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