Example site performance improvements and optimization

[hiteshshetty-dev]

Description
This PR implements performance improvements and optimizations for the example site. The changes include dynamic imports for better bundle splitting, improved accessibility.

Example

Before:

• Single monolithic example page with all components loaded upfront
• Build size:

• Lighthouse score:

After:

• Individual dynamic pages with code splitting
• Build size:

• Lighthouse source

Context
The example site was experiencing performance issues due to loading all example components upfront on each route, which created large bundle sizes and slow initial page loads. Additionally, the older version of @faker-js/faker (v8.2.0) was not supporting tree-shaking, significantly increasing the build size.

Checks

• The new code matches the existing patterns and styles.
• The tests pass with yarn test.
• The linter passes with yarn lint. (Fix errors with yarn fix.)
• The relevant examples still work. (Run examples with yarn start.)
• You've added a changeset if changing functionality. (Add one with yarn changeset add.)

[changeset-bot]

⚠️ No Changeset found

Latest commit: c7721af

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[12joan]

I think this could still be done using a single [example].tsx file, mapping the example name to the dynamic import path, page title and description, couldn't it?

[hiteshshetty-dev]

Thanks for the feedback! You're absolutely right that a single [example].tsx file could handle this with a mapping approach.
I initially implemented it that way, but then explored individual pages thinking it would provide better bundle optimization. However, after your comment, I realize the performance benefits might not be as significant as I initially thought, especially since we're already using dynamic imports.
I'd be happy to revert to the single [example].tsx approach - it would definitely be cleaner and easier to maintain. The main optimization we achieved (moving the common layout to _app.tsx) would still be preserved.

[hiteshshetty-dev]

Additional context: The benefit of moving the layout to _app.tsx is that it gets included in the initial HTML, and only the RTE examples would be loaded dynamically. This should provide a better user experience with faster initial page loads.

Before:

After:

[12joan]

Nice! I think keeping the [example].tsx would be better. Since these are just examples, code simplicity is more important than performance, and having a single pair of TSX and JSX files per example would help with that.

[hiteshshetty-dev]

Thanks, I’ve reverted the changes to [example].tsx

[12joan]

Is there an easy way of deduplicating this list with the one in [example].tsx?

[hiteshshetty-dev]

Yes, I missed this while migrating changes to ExampleLayout. I’ve now created a constants file with all the examples listed there, and both Layout and [example].tsx now use the same file