skills.rest
decocms
decocmsOFFICIAL
Explore all skills by this author →
Website𝕏@deco_cmsGitHub

asset-hash-busting

Hoist asset() calls to module-level constants for deterministic sprite URLs.

13|2|Updated Feb 24, 2026
Search Tags:#performance#frontend#react#optimization#sprite#asset
One-click install
npx skills add https://github.com/decocms/storefront-skills --skill asset-hash-busting
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: asset-hash-busting
Source: https://github.com/decocms/storefront-skills/tree/main/.claude-deco/skills/asset-hash-busting
Command: npx skills add https://github.com/decocms/storefront-skills --skill asset-hash-busting

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Calls to asset() inside render functions recompute URLs for icons, leading to repeated network requests and wasted bandwidth.

Core Features & Use Cases

  • Hoist asset() results to module scope to reuse a single URL across renders.
  • Applies to frontend component libraries with frequent icon/SVG usage to reduce bandwidth.
  • Provides guidance to identify asset() calls that do not depend on props and can be moved outside render logic.

Quick Start

Move any asset('/sprites.svg') call outside the component body to a module-level constant and reuse that constant in your SVG use href.

Frequently Asked Questions about asset-hash-busting

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

FAQPage Schema
Why does my React component keep downloading sprites on every render?▼

Hoisting asset() calls outside the render function stops repeated sprite downloads by resolving the URL once at module scope, ensuring a single network fetch per page load instead of recomputing on every render.

How do I hoist asset() usage to prevent repeated SVG icon fetches?▼

Move asset('/sprites.svg') calls outside the component body to a module-level constant, then reference that constant in your SVG use href to prevent redundant network requests across frequent list renders.

When should I hoist asset resolution to a module-level constant?▼

Hoist asset resolution when the URL is deterministic and independent of props or runtime state, particularly in frontend component libraries where icons render frequently across pages or lists to reduce wasted bandwidth.

Does hoisting asset() calls work for dynamic sprite paths that depend on component props?▼

Hoisting asset() calls does not work for dynamic sprite paths depending on component props. Asset resolution must be deterministic and independent of runtime state to successfully prevent repeated network requests at module scope.

Related Skills

Explore More Software Engineering Skills→
ihj04982ihj04982

hoist-regexp-creation

Hoist RegExp creation to module scope or memoize with useMemo in React render functions.

Community
Basic
johunsangjohunsang
10

website-to-hyperframes

Convert a website URL into a HyperFrames video with storyboard files.

Community
Advanced
benaorbenaor

react-performance

Profile React Native apps to identify and optimize rendering, startup, and memory bottlenecks.

Community
Advanced
kriscendobotkriscendobot
3

emoji-favicon

Generate emoji favicons as inline SVG data URIs for browsers.

Community
Basic