Dinou

Asset Manifest Loader (get-asset-from-manifest.js)

Understand compiled bundle mappings, production build hash resolutions, and development bundler fallbacks.

Key File Location: ./dinou/core/get-asset-from-manifest.js

💡 Overview

To optimize loading speeds, web browsers cache static files aggressively. If you publish updates to a JavaScript file without changing its name (e.g. main.js), returning visitors may execute outdated code cached in their browser.

Dinou solves this by appending short hashes representing content states to compiled file names (e.g., main.js maps to main-f823e10d.js). The get-asset-from-manifest.js utility resolves these dynamically generated filenames during HTML renders.

📊 Manifest Lookup Flow

The chart below traces how assets are resolved based on the environment:

⚡ Asset Cache Invalidation

When you compile your application via npm run build, the compiler groups entries and outputs a JSON lookup file (manifest.json):

{ "main.js": "main-5d82ef89.js", "client.js": "client-9c12b7a3.js", "styles.css": "styles-a82f321d.css" }

During Server-Side Rendering (SSR), when the HTML compiler constructs reference scripts:

// Instead of rendering a static script URL: const scriptSrc = "/main.js"; // Dinou resolves it dynamically: const scriptSrc = getAssetFromManifest("main.js"); // Returns "/main-5d82ef89.js"

This ensures the browser downloads the new asset immediately when compilation states change, preventing client-side cache bugs.

⚙️ Code Walkthrough

Below is the full, complete code of get-asset-from-manifest.js:

const fs = require("fs");
const path = require("path");

let manifest = {};
let read = false;
const isWebpack = process.env.DINOU_BUILD_TOOL === "webpack";

function getAssetFromManifest(name) {
  // 1. Production Mode: Read compiled assets from production output folder (dist3/)
  if (process.env.NODE_ENV === "production" && !read) {
    const manifestPath = path.resolve(process.cwd(), "dist3/manifest.json");
    if (fs.existsSync(manifestPath)) {
      manifest = JSON.parse(fs.readFileSync(manifestPath, "utf-8"));
      read = true; // Set lock to avoid read overhead on future lookups
    }
  // 2. Development Mode: If using Webpack, read from the public dev directory
  } else if (isWebpack && !read) {
    const manifestPath = path.resolve(process.cwd(), "public/manifest.json");
    if (fs.existsSync(manifestPath)) {
      manifest = JSON.parse(fs.readFileSync(manifestPath, "utf-8"));
      read = true;
    }
  }
  
  // 3. Resolve path and prepend root slash. Fall back to raw name if missing.
  return "/" + (manifest[name] || name);
}

module.exports = getAssetFromManifest;