⚡ Bolt: [performance improvement] Optimize PDF Forge icon imports for tree-shaking#149
⚡ Bolt: [performance improvement] Optimize PDF Forge icon imports for tree-shaking#149
Conversation
Replaced the wildcard import `import * as Icons from 'lucide-react'` in the PDF Forge dashboard with explicit named imports in the `tools.ts` constants file. This allows Next.js and Webpack to correctly tree-shake unused icons, significantly reducing the client-side JavaScript bundle size for the `/pdf` route. Co-authored-by: Cukurikik <266119688+Cukurikik@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
📝 WalkthroughWalkthroughThe changes refactor icon handling from string-based dynamic lookups with wildcard imports to explicit named icon component imports. The icon type definition is updated from Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~15 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/modules/pdf-forge/constants/tools.ts (1)
2-40: Decouple icon components from shared tool metadata to prevent unnecessary server-side imports.The server-side
src/app/pdf/[tool]/page.tsximportsPDF_TOOLSonly to accessname,description, androuteproperties in thegenerateMetadatafunction. However, the current structure forces it to also import all 32 lucide-react icon components, which are client-side UI dependencies that don't belong in the server module graph.Consider splitting into two exports: a metadata-only
PDF_TOOLS_METADATAfor server usage (without icon imports) and a separate client-side icon map that combines the metadata with Lucide components for UI rendering.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/modules/pdf-forge/constants/tools.ts` around lines 2 - 40, Split the current PDF_TOOLS export into a metadata-only structure and a client-side icon map: create a new PDF_TOOLS_METADATA (containing id, name, description, route — matching PdfToolDef minus the icon) and update any server-side usages (e.g., generateMetadata in page.tsx) to import PDF_TOOLS_METADATA instead of PDF_TOOLS so lucide-react icons are not pulled into the server bundle; keep the existing PDF_TOOLS (or a new PDF_TOOL_ICONS map) in the client module that merges PDF_TOOLS_METADATA entries with Lucide icons (referenced by their names like FileStack, Scissors, etc.) for UI rendering, and ensure types are updated so PdfToolDef remains the client shape with icon while a separate Metadata type is used for server imports.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In @.jules/bolt.md:
- Line 5: Update the entry header date in .jules/bolt.md from "2024-03-29" to
the correct PR date "2026-03-29" so the log reflects the actual timeline; locate
the heading line starting with "## 2024-03-29 - PDF Forge Icons Import
Tree-Shaking Bottleneck" and change the year to 2026 (resulting in "##
2026-03-29 - PDF Forge Icons Import Tree-Shaking Bottleneck").
---
Nitpick comments:
In `@src/modules/pdf-forge/constants/tools.ts`:
- Around line 2-40: Split the current PDF_TOOLS export into a metadata-only
structure and a client-side icon map: create a new PDF_TOOLS_METADATA
(containing id, name, description, route — matching PdfToolDef minus the icon)
and update any server-side usages (e.g., generateMetadata in page.tsx) to import
PDF_TOOLS_METADATA instead of PDF_TOOLS so lucide-react icons are not pulled
into the server bundle; keep the existing PDF_TOOLS (or a new PDF_TOOL_ICONS
map) in the client module that merges PDF_TOOLS_METADATA entries with Lucide
icons (referenced by their names like FileStack, Scissors, etc.) for UI
rendering, and ensure types are updated so PdfToolDef remains the client shape
with icon while a separate Metadata type is used for server imports.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: d53c03b8-fe10-40eb-b8a9-4fcc45552d2a
📒 Files selected for processing (3)
.jules/bolt.mdsrc/modules/pdf-forge/components/PdfForgeDashboard.tsxsrc/modules/pdf-forge/constants/tools.ts
| **Learning:** Using `import * as Icons from "lucide-react"` combined with dynamic property lookups completely defeats Next.js and Webpack tree-shaking mechanisms. In this specific Next.js codebase, it pulled in the entire `lucide-react` library (~160 KB extra JavaScript) into the `/audio` route's client bundle, rather than just the ~30 icons actually needed. | ||
| **Action:** Always import icons explicitly by name (e.g., `import { Scissors } from "lucide-react"`) and store the component reference itself when mapping configurations, rather than relying on string keys and wildcard imports. This drastically reduces First Load JS size. | ||
|
|
||
| ## 2024-03-29 - PDF Forge Icons Import Tree-Shaking Bottleneck |
There was a problem hiding this comment.
Update the entry date to match the actual PR date.
Line 5 uses 2024-03-29, but this PR is dated 2026-03-29. This can mislead future timeline/audit reads of this learning log.
Suggested patch
-## 2024-03-29 - PDF Forge Icons Import Tree-Shaking Bottleneck
+## 2026-03-29 - PDF Forge Icons Import Tree-Shaking Bottleneck📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| ## 2024-03-29 - PDF Forge Icons Import Tree-Shaking Bottleneck | |
| ## 2026-03-29 - PDF Forge Icons Import Tree-Shaking Bottleneck |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In @.jules/bolt.md at line 5, Update the entry header date in .jules/bolt.md
from "2024-03-29" to the correct PR date "2026-03-29" so the log reflects the
actual timeline; locate the heading line starting with "## 2024-03-29 - PDF
Forge Icons Import Tree-Shaking Bottleneck" and change the year to 2026
(resulting in "## 2026-03-29 - PDF Forge Icons Import Tree-Shaking Bottleneck").
1 participant
💡 What:
Replaced wildcard imports (
import * as Icons from 'lucide-react') and dynamic component lookups inPdfForgeDashboard.tsxwith explicit named imports withinsrc/modules/pdf-forge/constants/tools.ts. ThePDF_TOOLSconstant now stores direct React component references rather than string keys.🎯 Why:
Wildcard imports combined with dynamic property access completely defeat Webpack and Next.js tree-shaking mechanisms. Because the dashboard was accessing icons dynamically via string variables at runtime, the bundler was forced to include the entire
lucide-reactlibrary (~1500+ icons) in the client bundle, even though only ~30 icons were actually needed.📊 Impact:
/pdfroute.🔬 Measurement:
pnpm build./pdfroute. The First Load JS will be measurably smaller compared to the previous wildcard import implementation.PR created automatically by Jules for task 12979008199779249146 started by @Cukurikik
Summary by CodeRabbit
Release Notes
Chores
Documentation