[Refactor/Chore] Optimize the oversized in-site notification background asset
还没有人认领这个 Issue。
评估
- 难度
- 2/5
- 预计耗时
- 1-3 小时
- 新手友好度
- 76/100
- Issue 类型
- 重构
- 描述清晰度
- 基本清楚
- 活跃度
- 活跃
- 技术栈
- typescript
- 领域
- design, frontend, performance
调研方向
从 web/public/in-site-message/header-bg.svg 和 web/app/components/app/in-site-message/index.tsx 开始;检查 fallback URL 和自定义 title_pic_url 的使用方式,然后测量当前 asset 和 production transfer。优化 fallback,同时检查普通和高 DPI 下的显示效果,并保留自定义图片的行为。完成标准是 layout 未发生变化,并记录大小和 transfer 的优化前后测量结果。
由索引模型根据 Issue 内容生成。
描述
Self Checks
- I have read the Contributing Guide and Language Policy.
- This is only for refactors or chores; if you would like to ask a question, please head to Discussions.
- I have searched for existing issues search for existing issues, including closed ones.
- I confirm that I am using English to submit this report, otherwise it will be closed.
- 【中文用户 & Non English User】请使用英语提交,否则会被关闭 :)
- Please do not modify this template :) and fill in all the required fields.
Description
Optimize web/public/in-site-message/header-bg.svg, the fallback background for the small in-site notification header.
The SVG declares a 360×128 viewport but embeds a 4096×1625 PNG of 3,577,618 bytes as base64. The SVG is 4,772,282 bytes; estimated gzip remains 3,579,965 bytes. The public file is copied unchanged to the client build.
web/app/components/app/in-site-message/index.tsx uses this URL as DEFAULT_HEADER_BG_URL. The notification wrapper is Cloud-edition gated, and the fallback applies when title_pic_url is undefined. This is not a claim that every page or Community deployment downloads the image; the local Community page did not exercise a real notification download.
Reproduce by checking the SVG size, decoding its embedded PNG dimensions, and displaying a Cloud notification without a custom header image.
Motivation
A decorative header should not require a multi-megabyte raster. Replace the embedded image with an appropriately sized optimized asset, or an equivalent lightweight design, while preserving its appearance.
Acceptance criteria:
- Compare the background at normal and high-DPI display scales.
- Preserve custom header-image behavior and the fallback layout.
- Record before/after asset size and actual production compressed transfer.
Additional Context
Observed on a local Dify 1.17.1 development branch based on 06e473015a9a1abb71da88ac0a0e92d96a992008, with local DevTools integration patches; Vinext 1.0.0-beta.10, Vite+ core 0.3.2, Node 24.21.0. Recheck against current main before implementation. Build measurements are diagnostic baselines, not controlled production network benchmarks.
- 主要语言
- TypeScript
- 星标
- 157k
- 派生
- 24.7k
- 平均合并
- 22 小时 32 分钟
- 30 天内合并 PR
- 611
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
langgenius/dify 的其他 Issue
-
Annotation Reply: a stored score threshold of 0.0 is silently replaced with 1, disabling the feature 未关闭
难度 2/5 1-3 小时 新手友好度 88/100
langgenius/dify#42639 · 1 条评论 · 1 个 reaction ·
-
难度 2/5 1-3 小时 新手友好度 70/100
langgenius/dify#42468 · 1 条评论 · 1 个 reaction ·
-
🐞 bug
难度 2/5 1-3 小时 新手友好度 86/100
langgenius/dify#42446 · 1 个 reaction ·
-
难度 2/5 1-3 小时 新手友好度 88/100
langgenius/dify#42355 · 1 条评论 · 1 个 reaction ·
-
难度 2/5 1-3 小时 新手友好度 88/100
langgenius/dify#42350 · 1 条评论 · 1 个 reaction ·
相似的 Issue
-
calcite-components needs triage refactor
难度 2/5 1-3 小时 新手友好度 75/100
Esri/calcite-design-system#15203 ·
-
难度 2/5 1-3 小时 新手友好度 91/100
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
难度 1/5 1 小时以内 新手友好度 95/100
-
难度 2/5 1-3 小时 新手友好度 78/100
Automattic/studio#4908 ·
-
难度 2/5 1-3 小时 新手友好度 90/100