Unoptimized Image Assets and Missing Dynamic Import Optimization

(11 条评论) (0 个反应) (1 位负责人)TypeScript (43 个派生)auto 404

Stellar Wavedifficulty: mediumfrontendhelp wantedperformance

仓库指标

星标: (4 个星标)
PR 合并指标: (平均合并 2天 13小时) (30 天内合并 9 个 PR)

描述

Priority

Medium

Description

Large PNG assets in /public/images/ and /public/assets/ are loaded directly without WebP/AVIF format conversions. Swiper JS and heavy UI components are bundled statically into initial route chunks.

Proposed Solution

Convert static PNG assets to compressed WebP/AVIF images.
Use Next.js dynamic() lazy loading for heavy client components (EventSlider, TipTap editor, QRCode modals).

Acceptance Criteria

Images optimized and served in modern formats.
Initial bundle chunk size reduced.
Lighthouse Performance score improved.

Files

app/page.tsx
app/components/EventSlider.tsx
public/images/

贡献者指南

研究方向: 检查 app/page.tsx 和 EventSlider.tsx 中当前的图片使用和静态导入。研究 Next.js 的 Image 组件和 dynamic() 以实现懒加载。使用 webpack bundle analyzer 或 Next.js 的 bundle 分析来测量当前初始包大小，并在进行更改前检查 Lighthouse 性能指标。
技术栈: typescriptreactnextjs
领域: frontendperformance
议题类型: 性能
难度: 2
预计时间: 1-2 天
活动状态: 活跃
清晰度: 清晰
前置要求: GitNode.jsTypeScriptReact
新手友好度: 65