Cache derived info from the `manifest.json` (#191)

- Like getting all of the dependencies for a given entry point
 - And the favicons
 
Also fix the problem where `server/hydrogen-render/render-page-html.js` was calling `getFaviconAssetUrls()` right away before the client build had a chance to generate `dist/manifest.json` and result in `Error: Cannot find module '../../dist/manifest.json'`
This commit is contained in:
Eric Eastwood 2023-04-26 17:04:49 -05:00 committed by GitHub
parent c297270f39
commit f71fc2bb9c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 49 additions and 33 deletions

View File

@ -8,8 +8,6 @@ const safeJson = require('../lib/safe-json');
const getDependenciesForEntryPointName = require('../lib/get-dependencies-for-entry-point-name'); const getDependenciesForEntryPointName = require('../lib/get-dependencies-for-entry-point-name');
const getFaviconAssetUrls = require('../lib/get-favicon-asset-urls'); const getFaviconAssetUrls = require('../lib/get-favicon-asset-urls');
const faviconMap = getFaviconAssetUrls();
async function renderPageHtml({ async function renderPageHtml({
pageOptions, pageOptions,
// Make sure you sanitize this before passing it to us // Make sure you sanitize this before passing it to us
@ -39,6 +37,7 @@ async function renderPageHtml({
maybeNoIndexHtml = `<meta name="robots" content="noindex, nofollow" />`; maybeNoIndexHtml = `<meta name="robots" content="noindex, nofollow" />`;
} }
const faviconMap = getFaviconAssetUrls();
const pageHtml = ` const pageHtml = `
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">

View File

@ -3,27 +3,21 @@
const assert = require('assert'); const assert = require('assert');
const path = require('path').posix; const path = require('path').posix;
// Lazy-load the manifest so we only require it on first call hopefully after the Vite
// client build completes.
let _manifest;
function getManifest() {
if (_manifest) {
return _manifest;
}
// We have to disable this because it's built via the Vite client build.
// eslint-disable-next-line n/no-missing-require, n/no-unpublished-require
_manifest = require('../../dist/manifest.json');
return _manifest;
}
let _entryPoints; let _entryPoints;
function getEntryPoints() { function getEntryPoints() {
// Probably not that much overhead but only calculate this once
if (_entryPoints) { if (_entryPoints) {
return _entryPoints; return _entryPoints;
} }
const manifest = getManifest(); // Lazy-load the manifest so we only require it on first call hopefully after the Vite
// client build completes. `require(...)` calls are cached so it should be fine to
// look this up over and over.
//
// We have to disable this because it's built via the Vite client build.
// eslint-disable-next-line n/no-missing-require, n/no-unpublished-require
const manifest = require('../../dist/manifest.json');
_entryPoints = Object.keys(manifest).filter((name) => { _entryPoints = Object.keys(manifest).filter((name) => {
return manifest[name].isEntry; return manifest[name].isEntry;
}); });
@ -32,9 +26,15 @@ function getEntryPoints() {
// eslint-disable-next-line max-statements // eslint-disable-next-line max-statements
function recurseManifestEntryName(entryName) { function recurseManifestEntryName(entryName) {
const manifest = getManifest(); // Lazy-load the manifest so we only require it on first call hopefully after the Vite
const entry = manifest[entryName]; // client build completes. `require(...)` calls are cached so it should be fine to
// look this up over and over.
//
// We have to disable this because it's built via the Vite client build.
// eslint-disable-next-line n/no-missing-require, n/no-unpublished-require
const manifest = require('../../dist/manifest.json');
const entry = manifest[entryName];
const entryFilePath = path.join('/', entry.file); const entryFilePath = path.join('/', entry.file);
// css // css
@ -128,9 +128,22 @@ function recurseManifestEntryName(entryName) {
} }
// Look through the Vite manifest.json and return the dependencies for a given entry // Look through the Vite manifest.json and return the dependencies for a given entry
const entryPointNameToDependencies = new Map();
function getDependenciesForEntryPointName(entryPointName) { function getDependenciesForEntryPointName(entryPointName) {
assert(entryPointName); assert(entryPointName);
const manifest = getManifest();
// Try our cache shortcut first
if (entryPointNameToDependencies.has(entryPointName)) {
return entryPointNameToDependencies.get(entryPointName);
}
// Lazy-load the manifest so we only require it on first call hopefully after the Vite
// client build completes. `require(...)` calls are cached so it should be fine to
// look this up over and over.
//
// We have to disable this because it's built via the Vite client build.
// eslint-disable-next-line n/no-missing-require, n/no-unpublished-require
const manifest = require('../../dist/manifest.json');
const entry = manifest[entryPointName]; const entry = manifest[entryPointName];
assert( assert(
@ -145,7 +158,7 @@ function getDependenciesForEntryPointName(entryPointName) {
const { styles, fonts, images, scripts, preloadScripts } = const { styles, fonts, images, scripts, preloadScripts } =
recurseManifestEntryName(entryPointName); recurseManifestEntryName(entryPointName);
return { const deduplicatedDependencies = {
// De-duplicate assets // De-duplicate assets
styles: Array.from(new Set(styles)), styles: Array.from(new Set(styles)),
fonts: Array.from(new Set(fonts)), fonts: Array.from(new Set(fonts)),
@ -153,6 +166,9 @@ function getDependenciesForEntryPointName(entryPointName) {
scripts: Array.from(new Set(scripts)), scripts: Array.from(new Set(scripts)),
preloadScripts: Array.from(new Set(preloadScripts)), preloadScripts: Array.from(new Set(preloadScripts)),
}; };
entryPointNameToDependencies.set(entryPointName, deduplicatedDependencies);
return deduplicatedDependencies;
} }
module.exports = getDependenciesForEntryPointName; module.exports = getDependenciesForEntryPointName;

View File

@ -2,28 +2,29 @@
const path = require('path').posix; const path = require('path').posix;
// Lazy-load the manifest so we only require it on first call hopefully after the Vite let _faviconAssetUrls;
// client build completes. function getFaviconAssetUrls() {
let _manifest; // Probably not that much overhead but only calculate this once
function getManifest() { if (_faviconAssetUrls) {
if (_manifest) { return _faviconAssetUrls;
return _manifest;
}
// We have to disable this because it's built via the Vite client build.
// eslint-disable-next-line n/no-missing-require, n/no-unpublished-require
_manifest = require('../../dist/manifest.json');
return _manifest;
} }
function getFaviconAssetUrls() { // Lazy-load the manifest so we only require it on first call hopefully after the Vite
const manifest = getManifest(); // client build completes. `require(...)` calls are cached so it should be fine to
// look this up over and over.
//
// We have to disable this because it's built via the Vite client build.
// eslint-disable-next-line n/no-missing-require, n/no-unpublished-require
const manifest = require('../../dist/manifest.json');
const icoAssetPath = path.join('/', manifest['client/img/favicon.ico'].file); const icoAssetPath = path.join('/', manifest['client/img/favicon.ico'].file);
const svgAssetFile = path.join('/', manifest['client/img/favicon.svg'].file); const svgAssetFile = path.join('/', manifest['client/img/favicon.svg'].file);
return { _faviconAssetUrls = {
ico: icoAssetPath, ico: icoAssetPath,
svg: svgAssetFile, svg: svgAssetFile,
}; };
return _faviconAssetUrls;
} }
module.exports = getFaviconAssetUrls; module.exports = getFaviconAssetUrls;