skills.rest
omerakben
omerakbenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

bundle-optimization

Generate a curated icon manifest and enforce selective imports for front-end builds.

1|Updated Oct 9, 2025
Search Tags:#react#tree-shaking#code-splitting#bundle-size#frontend-performance#build-script#icon-manifest
One-click install
npx skills add https://github.com/omerakben/omer-akben --skill bundle-optimization
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bundle-optimization
Source: https://github.com/omerakben/omer-akben/tree/main/.claude/skills/bundle-optimization-skill
Command: npx skills add https://github.com/omerakben/omer-akben --skill bundle-optimization

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires simple-icons, and includes scripts (resource) components.

What problem does it solve?

Large front-end bundles slow down page loads. This Skill focuses on reducing bundle size by generating a curated icon manifest and enabling selective imports from icon libraries.

Core Features & Use Cases

  • Icon Manifest: Generate a minimal set of icons (e.g., 42) used by the project to dramatically reduce bundle size.
  • Tree-Shaking & Import Hygiene: Enforce named imports and a build-time manifest to avoid wildcard imports.
  • Build-Time Integration: Run a script to generate the manifest during the build process and expose a getIcon helper for safe usage.

Quick Start

Run the icon manifest generator and reference getIcon in your UI components to import only the needed icons.

Frequently Asked Questions about bundle-optimization

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I reduce bundle size caused by large icon libraries in a React app?▼

You can reduce bundle size by generating a curated icon manifest at build time and enforcing selective named imports, which prevents entire icon libraries from being bundled into your React app.

What is the best way to enforce tree-shaking for simple-icons in a Next.js build pipeline?▼

The best way to enforce tree-shaking for simple-icons is to run a build-time script that generates an icon map and exposes a getIcon helper, ensuring UI components only import the required icons.

Does this icon manifest approach work with Next.js and React front-end build pipelines?▼

Yes, this icon manifest approach is designed for front-end build pipelines like Next.js and React, where it reduces payload size during initial load and route transitions by enforcing import hygiene.

How does a build-time icon manifest generator prevent wildcard imports?▼

A build-time icon manifest generator prevents wildcard imports by creating a minimal icon map and providing a getIcon helper, which forces components to use selective named imports instead.

Why does importing simple-icons inflate my bundle size during route transitions?▼

Importing simple-icons inflates bundle size because wildcard or unoptimized imports bypass tree-shaking, pulling thousands of icons into the payload and slowing down route transitions.

Can I use a getIcon helper to limit named imports to only the icons used by my project?▼

Yes, you can use a generated getIcon helper to limit named imports to a curated manifest of 42 icons, ensuring your UI components safely reference only the needed icons without bloat.

Related Skills

Explore More Software Engineering Skills→
congiuluccongiuluc

cicd-github-actions

Generate GitHub Actions CI/CD workflows for .NET and React projects.

Community
Intermediate
1k-off1k-off
1

umbraco-icons

Register custom SVG icons for the Umbraco backoffice via extension manifest.

Community
Intermediate
7a336e6e7a336e6e
1

bundling-frontend

Configure Vite for optimized production builds with code splitting and tree-shaking.

Community
Intermediate
quanngynxquanngynx

tree-shaking

Eliminates dead exports and unreachable module code from JavaScript bundles during builds.

Community
Intermediate