Lite工具简单排查

以 此方案 为基准测试

优化前性能截图待补充。

主要问题在于移动端打开lite工具的时候页面十分卡顿

1. 事件监听多?
2. 引入的额外资源比较多
3. 内存占用过高
4. 监听过多

由于是在移动端使用, 不属于重度使用场景, 更多的重点在于能支持一些简单, 临时的修改就行, 因此主要优化原则就是 能精简就精简.

简单处理后得分

优化后性能截图待补充。

内存占用过高(暂时未排查到具体点, 后续做的时候再排查下)

https://developer.chrome.com/docs/lighthouse/performance/mainthread-work-breakdown?utm_source=lighthouse&utm_medium=devtools&hl=zh-cn

https://web.dev/articles/monitor-total-page-memory-usage?hl=zh-cn

部分已处理问题记录如下

示例	具体问题	解决方法
	export-design: 841kb, 右上角分享弹窗	懒加载, 点击右上角按钮再去加载
	ai-generate: 953kb, 文本生成 (旧版文本生成)	同上懒加载方式
	tool-ui-cmn: 788kb	不处理, 保持现状
	字体资源 yanshixiaxingkai.woff2: 4657Kb backupFont.woff2: 4176Kb taiwanquanziku....woff2: 3809Kb Source....woff2: 1013kb...	不处理, 保持现状

示例具体问题解决方法 export-design: 841kb右上角分享弹窗懒加载, 点击右上角按钮再去加载ai-generate: 953kb文本生成 (旧版文本生成)同上懒加载方式tool-ui-cmn: 788kb不处理, 保持现状字体资源yanshixiaxingkai.woff2: 4657KbbackupFont.woff2: 4176Kbtaiwanquanziku....woff2: 3809KbSource....woff2: 1013kb...不处理, 保持现状tool-ui组件资源之前有部分toast使用的tools-ui, 现在统一为了mj-base-ui(这里mj-base里面不做替换)由于lite工具要支持多语言路径切换, 所以挂载了完整的多语言内容, 请求大小飙升至623k如果是pad端, 同时不是coohom环境, 是不是就可以先不适配多语言了(这样能节约很多)localsitlite工具没有chunk, 资源体积有4670ksit环境打包是用splitChunk + Terserchunk拆分后为3801 + 894 两个请求terser压缩后为3449 + 845两个请求, 相比于之前节约了376k

示例具体问题解决方法空白页面icon集成到项目中, 不使用线上资源其他图片由于其他的都是预览图, 没办法提前获取, 因此不处理

示例具体问题解决方法需要gzip处理暂不处理

示例具体问题解决方法返回的资源没有经过压缩使用css-minimizer-webpack-plugin 进行处理, 但是暂时看起来没生效返回了部分其他暂时不用的微应用的资源在第一part懒加载处理后也就不存在了

示例具体问题解决方法部分图片请求没有走webp增加对imgUrl的webp处理

最长的task: 820ms 示例频繁触发函数 触发layout/util.ts(这里是处理元素)186.4 + 59.7eliminateConstraintCollisionByTypealgorithm/layout/util.ts: 186.4KGxLayoutContainer: 108.4 (主要优化)DisplayEntities/index.ts: 49.3 (次要)intelligentContainerEntity/index.ts: 46.3IntelligentLayoutBuilderAdapter.ts: 37.5photoWallLayout.ts: 37.4 IntelligentGroupCommand: 59.7icon-park 触发layout布局layout: 112.9FunctionPanel: 79QuickDesign: 14.7Design: 11.9AIBackground: 11.6AIAssitant: 26.3 sceneHandler: 77.6batchGenerate: 70.3BatchGeneratePanel: 46controlPoints/crop/index.ts: 23 kaf: 201.4不处理

mj-base内部toast组件mj-base-ui和tools-ui的解析性能对比

	不同组件
case-1fontLoadManager	mj-base-ui****113ms
tools-ui****18.8ms
None****19.4ms(这里数值是本地测的有波动, 所以可能会比上面的大些)
case-2deleteCommand	mj-base-ui191.5ms
tools-ui****118.8ms
muya-ui153.3ms
综上, 最后这mj-base里面还是使用tools-ui来进行消息提示

-------------------------- Below is Draft.... --------------------------

处理前

在verifyElement中直接不调用该方法

目前是156ms