Asset Management — Cheat Sheet

Tags: asset-management, webpack, vite, cdn, caching, web-performance

Level: intermediate

TL;DR: Best practices for hashing, bundling, lazy loading, and caching static assets across web applications.

Key concepts

Static assets comprise images, fonts, styles, scripts, and media files.

Content hashing produces deterministic filenames based strictly on file contents.

Immutable cache headers enable long-term browser caching for hashed bundles.

Code splitting breaks large bundles into granular on-demand chunks.

Dynamic imports trigger chunk downloads only when required by routes.

Preloading fetches high-priority critical resources early in page lifecycle.

Asset optimization involves image compression, modern formats, and tree shaking.

CDNs terminate TLS closer to clients and serve cached static edge responses.

Cache busting forces clients to discard stale cached files upon deploy.

Typical questions and ready answers

Q: How do you guarantee browser cache invalidation upon releasing new application code?R: I configure the build pipeline to use content hashing in chunk filenames and serve them with immutable HTTP cache headers.

Q: What is the difference between preloading and prefetching assets?R: Preload requests critical assets needed immediately for the current route, while prefetch downloads idle-time assets needed for future navigations.

Q: When should media assets be placed in public storage rather than bundled by Vite or Webpack?R: I keep dynamically requested assets or files larger than build processing thresholds in public storage or external cloud object stores.

Pitfalls and common mistakes

Missing content hashes while setting long-lived max-age HTTP cache headers.

Caching index.html aggressively, which locks users onto outdated bundle hashes.

Bundling heavy icons or images directly into JS bundles as base64 strings.

Loading uncompressed media formats instead of modern WebP, AVIF, or WOFF2.

Over-splitting bundles leading to network waterfall bottlenecks on HTTP/1.1 connections.

Snippets and commandsTypeScript

// Vite chunk splitting & asset hashing configuration
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        entryFileNames: 'assets/[name].[hash].js',
        chunkFileNames: 'assets/[name].[hash].js',
        assetFileNames: 'assets/[name].[hash].[ext]',
      },
    },
  },
});

Nginx

# Nginx caching headers for immutable hashed assets vs index.html
location /assets/ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

location = /index.html {
    add_header Cache-Control "no-cache, no-store, must-revalidate";
}

To review

[ ] Content hashing differences between Webpack contenthash and chunkhash

[x] Setting immutable cache headers on cloud object storage (S3/CloudFront)

[ ] Font subsetting and critical CSS extraction strategies

Jarvis Interviews
Jarvis