Unoptimized Image Assets and Missing Dynamic Import Optimization

(11 則留言) (0 個反應) (1 位負責人)TypeScript (43 個分叉)auto 404

Stellar Wavedifficulty: mediumfrontendhelp wantedperformance

倉庫指標

星標: (4 顆星)
PR 合併指標: (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