Skip to content

MWPW-200568 Parallelize initService script loading in merch block #6296

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
TsayAdobe wants to merge 8 commits into
base: stage
Choose a base branch
from
+60 −19
Open

MWPW-200568 Parallelize initService script loading in merch block #6296

Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
4048627
Parallel loading of dependent scripts
TsayAdobe Jul 14, 2026
eecab24
dynamic import mas-mep-utils.js
TsayAdobe Jul 15, 2026
f0f88ec
Optimize merch-card-autoblock.js
TsayAdobe Jul 16, 2026
f135f3a
re: Axel's comment
TsayAdobe Jul 17, 2026
ee68042
Add static preloads hints
TsayAdobe Jul 17, 2026
a3d3fb9
Support lower environments
TsayAdobe Jul 17, 2026
7279847
Merge branch 'stage' into MWPW-200568
TsayAdobe Jul 17, 2026
fa9d510
Fix config bleed
TsayAdobe Jul 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 16 additions & 18 deletions libs/blocks/merch/merch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import {
shouldAllowKrTrial, getCountry,
} from '../../utils/utils.js';
import { replaceKey } from '../../features/placeholders.js';
import { mepMasStudioUrls } from './mas-mep-utils.js';

// MAS Component Names
export const COMMERCE_LIBRARY = 'commerce';
Expand Down Expand Up @@ -1116,27 +1115,25 @@ export async function initService(force = false, attributes = {}) {
});
initService.promise = initService.promise
?? polyfills().then(async () => {
await loadMasComponent(COMMERCE_LIBRARY);
const useGeoMarket = isMasGeoDetectionEnabled();

// Load fragment-client.js when maslibs is present
// Load all independent resources in parallel
const fragmentClientUrl = getFragmentClientUrl();
if (fragmentClientUrl) {
const { loadScript: loadScriptUtil } = await import('../../utils/utils.js');
try {
await loadScriptUtil(fragmentClientUrl, 'module');
} catch (e) {
log?.error('Failed to load fragment-client.js:', e);
}
}
const [, , { language, locale, country }, validatedMarket] = await Promise.all([

@Axelcureno Axelcureno Jul 15, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These two look independent but aren't. Old order:

await getLocaleSettings()  → getCountry() → getAkamaiCode() → writes sessionStorage.akamai
await getValidatedMarket() → getCountry() → reads it ✅

The sequential await was doing load-bearing work — priming the cache before the second read. In parallel, both call getCountry() before either has written it. getAkamaiCode (geo.js:7) has no in-flight dedup and is cache: 'no-cache', so nothing collapses them.

I ran this locally against the branch — sequential gives 1 geo2.adobe.com fetch, parallel gives 2. So: two concurrent geo fetches per geo-enabled page load. Related risk I did not reproduce, but the code path is there — getValidatedMarket() resolving on a null country falls back to currLang.defaultMarket || 'us' (market.js:38), which would be a wrong-country price render on a slow or failing geo call.

Keeps most of the win — chain just the market call off the settings that prime the cache:

const localeSettingsPromise = getLocaleSettings(miloLocale);
const [, , { language, locale, country }, validatedMarket] = await Promise.all([
  loadMasComponent(COMMERCE_LIBRARY),
  fragmentClientUrl ? loadScript(fragmentClientUrl, 'module').catch(...) : Promise.resolve(),
  localeSettingsPromise,
  useGeoMarket
    ? localeSettingsPromise.then(() => import('../../utils/market.js')
        .then(({ getValidatedMarket }) => getValidatedMarket()))
    : Promise.resolve(null),
]);

loadMasComponent / loadScript / getLocaleSettings are genuinely independent, so that's where the real gain was anyway. Alternative: memoize the in-flight promise in getAkamaiCode — fixes the double-fetch for every caller, since getCountry and resolveDetectedMarketCountry both funnel through it.

loadMasComponent(COMMERCE_LIBRARY),
fragmentClientUrl
? loadScript(fragmentClientUrl, 'module').catch((e) => {
log?.error('Failed to load fragment-client.js:', e);
})
: Promise.resolve(),
getLocaleSettings(miloLocale),
useGeoMarket
? import('../../utils/market.js').then(({ getValidatedMarket }) => getValidatedMarket())
: Promise.resolve(null),
]);

const { language, locale, country } = await getLocaleSettings(miloLocale);
const useGeoMarket = isMasGeoDetectionEnabled();
let countryFromMarket = country;
if (useGeoMarket) {
const { getValidatedMarket } = await import('../../utils/market.js');
const validatedMarket = await getValidatedMarket();
if (validatedMarket) countryFromMarket = validatedMarket.toUpperCase();
}
if (useGeoMarket && validatedMarket) countryFromMarket = validatedMarket.toUpperCase();
let service = document.head.querySelector('mas-commerce-service');
if (!service) {
setPreview(attributes);
Expand Down Expand Up @@ -1623,6 +1620,7 @@ export default async function init(el) {
// Rebuilt merch href keeps only the OSI; stash the original for
// the "Edit OSI" badge.
if (getConfig()?.mep?.preview) {
const { mepMasStudioUrls } = await import('./mas-mep-utils.js');
mepMasStudioUrls.set(merch, el.href);
merch.dataset.masBlock = 'ost';
}
Expand Down
Loading