refactor(app-shell): add more code split entry points

[emmenko]

Branched off #2995

Extracted from #2821

Main goal is to reduce the size of the main bundle by code splitting more components within the App Shell.

Webpack (Starter template with code splitted routes)

Vite (Playground with code splitted routes)

[changeset-bot]

🦋 Changeset detected

Latest commit: bf8f0eb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 35 packages

Name	Type
@commercetools-frontend/application-shell	Patch
@commercetools-local/playground	Patch
@commercetools-frontend/cypress	Patch
@commercetools-applications/merchant-center-template-starter-typescript	Patch
@commercetools-applications/merchant-center-template-starter	Patch
@commercetools-backend/eslint-config-node	Patch
@commercetools-backend/express	Patch
@commercetools-backend/loggers	Patch
@commercetools-frontend/actions-global	Patch
@commercetools-frontend/application-components	Patch
@commercetools-frontend/application-config	Patch
@commercetools-frontend/application-shell-connectors	Patch
@commercetools-frontend/assets	Patch
@commercetools-frontend/babel-preset-mc-app	Patch
@commercetools-frontend/browser-history	Patch
@commercetools-frontend/codemod	Patch
@commercetools-frontend/constants	Patch
@commercetools-frontend/create-mc-app	Patch
@commercetools-frontend/eslint-config-mc-app	Patch
@commercetools-frontend/i18n	Patch
@commercetools-frontend/jest-preset-mc-app	Patch
@commercetools-frontend/jest-stylelint-runner	Patch
@commercetools-frontend/l10n	Patch
@commercetools-frontend/mc-dev-authentication	Patch
@commercetools-frontend/mc-html-template	Patch
@commercetools-frontend/mc-scripts	Patch
@commercetools-frontend/notifications	Patch
@commercetools-frontend/permissions	Patch
@commercetools-frontend/react-notifications	Patch
@commercetools-frontend/sdk	Patch
@commercetools-frontend/sentry	Patch
@commercetools-frontend/url-utils	Patch
@commercetools-local/visual-testing-app	Patch
@commercetools-website/custom-applications	Patch
@commercetools-website/components-playground	Patch

Not sure what this means? Click here to learn what changesets are.

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

[github-actions]

Deploy preview for merchant-center-application-kit ready!

✅ Preview
https://merchant-center-application-72lgnalum-commercetools.vercel.app
https://appkit-sha-77d2134693657bbcf8fcdb178239786b0d709ef2.commercetools.vercel.app
https://appkit-pr-2997.commercetools.vercel.app

Built with commit bf8f0eb.
This pull request is being automatically deployed with vercel-action

[kark]

🙌

[kark]

I think our template packages are missing

[Rhotimee]

👏🏽👏🏽

[CarlosCortizasCT]

In general I think this is a great idea.

However, I would also share some thoughts about lazy loading component with a very high chance of been rendered as this ApplicationShellAuthenticated, or project and locale switchers. By moving them out from the initial bundle, we are introducing a delay in the user experience since now they will need to be fetched when React detects it needs them.

Maybe the latency for a backoffice application is not such a high requirement because most users will have a wired internet connection, but just wanted to share some concerns I had in the past when using lazy loading too much.

[emmenko]

Thanks for the feedback. Yes some parts might have a slight delay now. The <ApplicationShellAuthenticated> is only rendered if the user is authenticated so I think we can try code splitting it.

In general we can observe the loading behavior / performance and make further adjustments along the way.

Regarding the switcher components, you're right they probably don't need to be code splitted. Let me revert that part.

[ddouglasz]

👏