From f8f42d3df5c31718f9ffcd6f7f92b5fef6454293 Mon Sep 17 00:00:00 2001 From: andrewHEguardian <114918544+andrewHEguardian@users.noreply.github.com> Date: Fri, 24 Jan 2025 14:22:05 +0000 Subject: [PATCH 1/2] feat: make lazy loading default on checkouts --- .../app/controllers/Application.scala | 2 +- support-frontend/app/views/router.scala.html | 2 +- .../pages/[countryGroupId]/lazyRouter.tsx | 85 ------------------- .../assets/pages/[countryGroupId]/router.tsx | 64 +++++++++----- support-frontend/webpack.entryPoints.js | 1 - 5 files changed, 46 insertions(+), 108 deletions(-) delete mode 100644 support-frontend/assets/pages/[countryGroupId]/lazyRouter.tsx diff --git a/support-frontend/app/controllers/Application.scala b/support-frontend/app/controllers/Application.scala index fbe639aac9..36788c4db6 100644 --- a/support-frontend/app/controllers/Application.scala +++ b/support-frontend/app/controllers/Application.scala @@ -499,7 +499,7 @@ class Application( def productCheckoutRouter(countryGroupId: String) = MaybeAuthenticatedAction { implicit request => implicit val settings: AllSettings = settingsProvider.getAllSettings() val geoData = request.geoData - val serversideTests = generateParticipations(List("lazyLoading")) + val serversideTests = generateParticipations(Nil) val isTestUser = testUserService.isTestUser(request) // This will be present if the token has been flashed into the session by the PayPal redirect endpoint val guestAccountCreationToken = request.flash.get("guestAccountCreationToken") diff --git a/support-frontend/app/views/router.scala.html b/support-frontend/app/views/router.scala.html index 14c5f40d71..89d8ffb938 100644 --- a/support-frontend/app/views/router.scala.html +++ b/support-frontend/app/views/router.scala.html @@ -23,7 +23,7 @@ @main( title = "Support the Guardian | Checkout", mainElement = assets.getSsrCacheContentsAsHtml(divId = "router", file = "ssr-holding-content.html"), - mainJsBundle = if (serversideTests.get("lazyLoading").contains(Variant)) RefPath("[countryGroupId]/lazyRouter.js") else RefPath("[countryGroupId]/router.js"), + mainJsBundle = RefPath("[countryGroupId]/router.js"), mainStyleBundle = None, description = Some("Help us deliver the independent journalism the world needs. Support the Guardian by making a contribution."), canonicalLink = Some("https://support.theguardian.com/checkout"), diff --git a/support-frontend/assets/pages/[countryGroupId]/lazyRouter.tsx b/support-frontend/assets/pages/[countryGroupId]/lazyRouter.tsx deleted file mode 100644 index 2bde5d4651..0000000000 --- a/support-frontend/assets/pages/[countryGroupId]/lazyRouter.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import { lazy, Suspense } from 'react'; -import { createBrowserRouter, RouterProvider } from 'react-router-dom'; -import { HoldingContent } from 'components/serverSideRendered/holdingContent'; -import { parseAppConfig } from 'helpers/globalsAndSwitches/window'; -import { - getAbParticipations, - setUpTrackingAndConsents, -} from 'helpers/page/page'; -import { renderPage } from 'helpers/rendering/render'; -import { geoIds } from 'pages/geoIdConfig'; - -const abParticipations = getAbParticipations(); -setUpTrackingAndConsents(abParticipations); -const appConfig = parseAppConfig(window.guardian); - -const Checkout = lazy( - () => import(/* webpackChunkName: "checkout" */ './checkout'), -); -const OneTimeCheckout = lazy( - () => import(/* webpackChunkName: "oneTimeCheckout" */ './oneTimeCheckout'), -); -const ThankYou = lazy( - () => import(/* webpackChunkName: "ThankYou" */ './thankYou'), -); -const GuardianAdLiteLanding = lazy( - () => - import( - /* webpackChunkName: "GuardianAdLiteLanding" */ './guardianAdLiteLanding/guardianAdLiteLanding' - ), -); - -const router = createBrowserRouter( - geoIds.flatMap((geoId) => [ - { - path: `/${geoId}/checkout`, - element: ( - }> - - - ), - }, - { - path: `/${geoId}/one-time-checkout`, - element: ( - }> - - - ), - }, - { - path: `/${geoId}/thank-you`, - element: ( - }> - - - ), - }, - { - path: `/${geoId}/guardian-ad-lite`, - element: ( - }> - - - ), - }, - ]), -); - -function Router() { - return ; -} - -export default renderPage(); diff --git a/support-frontend/assets/pages/[countryGroupId]/router.tsx b/support-frontend/assets/pages/[countryGroupId]/router.tsx index 30260691e2..2bde5d4651 100644 --- a/support-frontend/assets/pages/[countryGroupId]/router.tsx +++ b/support-frontend/assets/pages/[countryGroupId]/router.tsx @@ -1,4 +1,6 @@ +import { lazy, Suspense } from 'react'; import { createBrowserRouter, RouterProvider } from 'react-router-dom'; +import { HoldingContent } from 'components/serverSideRendered/holdingContent'; import { parseAppConfig } from 'helpers/globalsAndSwitches/window'; import { getAbParticipations, @@ -6,50 +8,72 @@ import { } from 'helpers/page/page'; import { renderPage } from 'helpers/rendering/render'; import { geoIds } from 'pages/geoIdConfig'; -import { Checkout } from './checkout'; -import { GuardianAdLiteLanding } from './guardianAdLiteLanding/guardianAdLiteLanding'; -import { OneTimeCheckout } from './oneTimeCheckout'; -import { ThankYou } from './thankYou'; const abParticipations = getAbParticipations(); setUpTrackingAndConsents(abParticipations); const appConfig = parseAppConfig(window.guardian); +const Checkout = lazy( + () => import(/* webpackChunkName: "checkout" */ './checkout'), +); +const OneTimeCheckout = lazy( + () => import(/* webpackChunkName: "oneTimeCheckout" */ './oneTimeCheckout'), +); +const ThankYou = lazy( + () => import(/* webpackChunkName: "ThankYou" */ './thankYou'), +); +const GuardianAdLiteLanding = lazy( + () => + import( + /* webpackChunkName: "GuardianAdLiteLanding" */ './guardianAdLiteLanding/guardianAdLiteLanding' + ), +); + const router = createBrowserRouter( geoIds.flatMap((geoId) => [ { path: `/${geoId}/checkout`, element: ( - + }> + + ), }, { path: `/${geoId}/one-time-checkout`, element: ( - + }> + + ), }, { path: `/${geoId}/thank-you`, element: ( - + }> + + ), }, { path: `/${geoId}/guardian-ad-lite`, - element: , + element: ( + }> + + + ), }, ]), ); diff --git a/support-frontend/webpack.entryPoints.js b/support-frontend/webpack.entryPoints.js index 96c4e5c3f1..a2c754810b 100644 --- a/support-frontend/webpack.entryPoints.js +++ b/support-frontend/webpack.entryPoints.js @@ -1,7 +1,6 @@ module.exports = { common: { '[countryGroupId]/router': 'pages/[countryGroupId]/router.tsx', - '[countryGroupId]/lazyRouter': 'pages/[countryGroupId]/lazyRouter.tsx', '[countryGroupId]/events/router': 'pages/[countryGroupId]/events/router.tsx', favicons: 'images/favicons.ts', From c89eabe460755748d19632013491a37c0e71c90e Mon Sep 17 00:00:00 2001 From: andrewHEguardian <114918544+andrewHEguardian@users.noreply.github.com> Date: Fri, 24 Jan 2025 15:35:13 +0000 Subject: [PATCH 2/2] use named import in lazy load --- .../pages/[countryGroupId]/checkout.tsx | 2 - .../guardianAdLiteLanding.tsx | 2 - .../[countryGroupId]/oneTimeCheckout.tsx | 2 - .../assets/pages/[countryGroupId]/router.tsx | 39 ++++++++++++------- .../pages/[countryGroupId]/thankYou.tsx | 2 - 5 files changed, 24 insertions(+), 23 deletions(-) diff --git a/support-frontend/assets/pages/[countryGroupId]/checkout.tsx b/support-frontend/assets/pages/[countryGroupId]/checkout.tsx index ad4deac29b..fa330ebf5a 100644 --- a/support-frontend/assets/pages/[countryGroupId]/checkout.tsx +++ b/support-frontend/assets/pages/[countryGroupId]/checkout.tsx @@ -275,5 +275,3 @@ export function Checkout({ geoId, appConfig, abParticipations }: Props) { ); } - -export default Checkout; diff --git a/support-frontend/assets/pages/[countryGroupId]/guardianAdLiteLanding/guardianAdLiteLanding.tsx b/support-frontend/assets/pages/[countryGroupId]/guardianAdLiteLanding/guardianAdLiteLanding.tsx index 0b8697ba20..ade88df8fd 100644 --- a/support-frontend/assets/pages/[countryGroupId]/guardianAdLiteLanding/guardianAdLiteLanding.tsx +++ b/support-frontend/assets/pages/[countryGroupId]/guardianAdLiteLanding/guardianAdLiteLanding.tsx @@ -49,5 +49,3 @@ export function GuardianAdLiteLanding({ ); } - -export default GuardianAdLiteLanding; diff --git a/support-frontend/assets/pages/[countryGroupId]/oneTimeCheckout.tsx b/support-frontend/assets/pages/[countryGroupId]/oneTimeCheckout.tsx index 3ccbbb6c9b..4e7b6ea2c0 100644 --- a/support-frontend/assets/pages/[countryGroupId]/oneTimeCheckout.tsx +++ b/support-frontend/assets/pages/[countryGroupId]/oneTimeCheckout.tsx @@ -59,5 +59,3 @@ export function OneTimeCheckout({ ); } - -export default OneTimeCheckout; diff --git a/support-frontend/assets/pages/[countryGroupId]/router.tsx b/support-frontend/assets/pages/[countryGroupId]/router.tsx index 2bde5d4651..be175bed04 100644 --- a/support-frontend/assets/pages/[countryGroupId]/router.tsx +++ b/support-frontend/assets/pages/[countryGroupId]/router.tsx @@ -13,21 +13,30 @@ const abParticipations = getAbParticipations(); setUpTrackingAndConsents(abParticipations); const appConfig = parseAppConfig(window.guardian); -const Checkout = lazy( - () => import(/* webpackChunkName: "checkout" */ './checkout'), -); -const OneTimeCheckout = lazy( - () => import(/* webpackChunkName: "oneTimeCheckout" */ './oneTimeCheckout'), -); -const ThankYou = lazy( - () => import(/* webpackChunkName: "ThankYou" */ './thankYou'), -); -const GuardianAdLiteLanding = lazy( - () => - import( - /* webpackChunkName: "GuardianAdLiteLanding" */ './guardianAdLiteLanding/guardianAdLiteLanding' - ), -); +const Checkout = lazy(() => { + return import(/* webpackChunkName: "checkout" */ './checkout').then((mod) => { + return { default: mod.Checkout }; + }); +}); +const OneTimeCheckout = lazy(() => { + return import( + /* webpackChunkName: "oneTimeCheckout" */ './oneTimeCheckout' + ).then((mod) => { + return { default: mod.OneTimeCheckout }; + }); +}); +const ThankYou = lazy(() => { + return import(/* webpackChunkName: "ThankYou" */ './thankYou').then((mod) => { + return { default: mod.ThankYou }; + }); +}); +const GuardianAdLiteLanding = lazy(() => { + return import( + /* webpackChunkName: "GuardianAdLiteLanding" */ './guardianAdLiteLanding/guardianAdLiteLanding' + ).then((mod) => { + return { default: mod.GuardianAdLiteLanding }; + }); +}); const router = createBrowserRouter( geoIds.flatMap((geoId) => [ diff --git a/support-frontend/assets/pages/[countryGroupId]/thankYou.tsx b/support-frontend/assets/pages/[countryGroupId]/thankYou.tsx index b9e2fb64f6..e4635596a6 100644 --- a/support-frontend/assets/pages/[countryGroupId]/thankYou.tsx +++ b/support-frontend/assets/pages/[countryGroupId]/thankYou.tsx @@ -173,5 +173,3 @@ export function ThankYou({ /> ); } - -export default ThankYou;