Optimize Server-side performance

[adamraya]

Description

First iteration improving Retail React App Server-side performance.

Problem

Analyzing the Chrome DevTools CPU Profiler results we see today we run a quite expensive method buildPathWithUrlConfig() every time we need to build a URL, which includes running the method on every Link rendered by the App.

Solution

The pattern we use to build URLs doesn't change in the App unless we change the App default configuration values or unless we do a hard refresh (e.g. Choosing a different locale using the locale selector in the Footer).

The proposed solution is to use React.Context to provide the URL template literal with the pattern to build URLs to the entire App.

• The new createUrlTemplate() function generating the URL template literal is executed only once.
• The buildPathWithUrlConfig() method is replaced and re-implemented by the createUrlTemplate() method. Removing and unrolling loops with a set of conditionals to reflect the potential URL configurations.

Results

Home Page Sever-side

Product List Page Sever-side

Types of Changes

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Documentation update
• Breaking change (could cause existing functionality to not work as expected)
• Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

• Removing a public function or component or prop
• Adding a required argument to a function
• Changing the data type of a function parameter or return value
• Adding a new peer dependency to package.json

Changes

• Added <MultiSiteProvider /> to AppConfig to provide the multi-site related values to the entire App: locale, site and buildUrl() function that returns a URL template literal with the pattern to build URLs according to the App configuration defined in default.js file.
• Numerous multi-site related refactors, including fixing tests and adding new tests to cover all the different App configurations.

How to Test-Drive This PR

Using Chrome DevTools:

1. Start the Retail React App with Node inspector.

npm run start:inspect --prefix packages/template-retail-react-app/

2. Navigate to the Home page. Open Chrome DevTools, open the Node inspector and click the Profiler tab.
3. Click the Record button to record a new CPU Profile, refresh home page and stop the recording.
4. Analyze the result.

Checklists

General

• Changes are covered by test cases
• CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

• There are no changes to UI

or...

• Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
• Changes comply with WCAG 2.0 guidelines levels A and AA
• Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

• Changes include a UI text update in the Retail React App (which requires translation)

[vmarta]

Let me skim the rest of the changes. I'm not too familiar with other changes that were requested. But I may still give a +1 if things look all right to me.

[vmarta]

Besides one comment about locale in AppConfig, everything else looks good to me 👍