[Refactor/Chore] Optimize the oversized in-site notification background asset

已关闭 适合新手
#42,441 1 条评论 1 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
2/5
预计耗时
1-3 小时
新手友好度
76/100
Issue 类型
重构
描述清晰度
基本清楚
活跃度
活跃
技术栈
typescript

调研方向

从 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 内容生成。

描述

project#dify
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

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

langgenius/dify 的其他 Issue

查看 langgenius/dify 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。