The-DevOps-Daily/devops-daily

feat: Add bundle analyzer for build optimization

開放

#532 建立於 2025年12月2日

 (0 則留言) (0 個反應) (0 位負責人)TypeScript (392 個分叉)github user discovery
enhancementgood first issuehacktoberfest

倉庫指標

星標
 (1,087 顆星)
PR 合併指標
 (平均合併 1天 23小時) (30 天內合併 82 個 PR)

描述

Description

Install and configure Next.js bundle analyzer to identify large dependencies and optimize bundle size.

Problem

  • No visibility into bundle composition
  • Unknown which dependencies are increasing bundle size
  • No metrics for code splitting effectiveness
  • Difficult to identify optimization opportunities

Current Dependencies

Some potentially large dependencies:

  • framer-motion - Animation library
  • highlight.js - Syntax highlighting
  • marked - Markdown parser
  • lucide-react - Icon library
  • Various other dependencies

Proposed Solution

Add @next/bundle-analyzer to:

  • Visualize bundle composition
  • Identify large dependencies
  • Find duplicate code
  • Optimize code splitting
  • Track bundle size over time

Acceptance Criteria

  • Install @next/bundle-analyzer
  • Configure in next.config.mjs
  • Add npm script: npm run analyze
  • Document bundle analysis process
  • Create baseline bundle size report
  • Add bundle size to PR checks (optional)
  • Document findings and optimization recommendations

Files to Modify

  • package.json - Add dependency and script
  • next.config.mjs - Configure analyzer
  • docs/bundle-analysis.md - New documentation

貢獻者指南