feat/MSSDK-2126: add vite-plugin-webpackchunkname to fix code splitting

package.json

@@ -51,7 +51,8 @@
     "react-redux": "^8.1.3",
     "react-select": "^5.5.4",
     "redux-thunk": "^2.4.2",
-    "resolve": "1.22.0"
+    "resolve": "1.22.0",
+    "vite-plugin-webpackchunkname": "^1.0.3"
   },
   "scripts": {
     "test": "vitest --silent",

src/components/Payment/Payment.tsx

@@ -39,8 +39,12 @@ import PayPal from './PayPal/PayPal';
 import DropInSection from './DropInSection/DropInSection';
 import { PaymentProps } from './Payment.types';
 
-const Adyen = lazy(() => import('components/Adyen'));
-const Primer = lazy(() => import('components/Primer'));
+const Adyen = lazy(
+  () => import(/* webpackChunkName: "adyen-component" */ 'components/Adyen')
+);
+const Primer = lazy(
+  () => import(/* webpackChunkName: "primer-component" */ 'components/Primer')
+);
 
 const Payment = ({ onPaymentComplete }: PaymentProps) => {
   const { paymentMethods: publisherPaymentMethods, isPayPalHidden } =

src/components/UpdatePaymentDetailsPopup/UpdatePaymentDetailsPopup.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, lazy, Suspense } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import InnerPopupWrapper from 'components/InnerPopupWrapper';
@@ -48,10 +48,16 @@ import {
   ErrorStep,
   FinalizeAddPaymentDetails
 } from './Steps';
-import Adyen from '../Adyen';
 import PayPal from '../Payment/PayPal/PayPal';
 import Loader from '../Loader';
 
+const Adyen = lazy(() =>
+  import(/* webpackChunkName: "adyen-component" */ 'components/Adyen')
+);
+const Primer = lazy(() =>
+  import(/* webpackChunkName: "primer-component" */ 'components/Primer')
+);
+
 const PaymentMethodIcons = {
   amazon: AmazonIcon,
   apple: AppleIcon,
@@ -263,10 +269,32 @@ const UpdatePaymentDetailsPopup = () => {
     : shouldShowGatewayComponent('paypal', paymentMethods);
 
   const shouldShowAdyen = shouldShowGatewayComponent('adyen', paymentMethods);
+  const shouldShowPrimer = shouldShowGatewayComponent('primer', paymentMethods);
 
   const showPayPalWhenAdyenIsReady = () =>
     shouldShowAdyen ? !!dropInInstance : true;
 
+  const getPaymentDropIn = () => {
+    if (shouldShowPrimer) {
+      return <Primer />;
+    }
+
+    if (shouldShowAdyen) {
+      return (
+        <Adyen
+          isMyAccount
+          onSubmit={addAdyenPaymentDetails}
+          selectPaymentMethod={selectPaymentMethodHandler}
+          isPayPalAvailable={shouldShowPayPal}
+          getDropIn={getDropIn}
+          onAdditionalDetails={onAdditionalDetails}
+        />
+      );
+    }
+
+    return null;
+  };
+
   if (step === PAYMENT_DETAILS_STEPS.DELETE_PAYMENT_DETAILS) {
     return (
       <InnerPopupWrapper
@@ -374,16 +402,7 @@ const UpdatePaymentDetailsPopup = () => {
           )}
         </TextStyled>
         <PaymentMethodsWrapperStyled>
-          {shouldShowAdyen && (
-            <Adyen
-              isMyAccount
-              onSubmit={addAdyenPaymentDetails}
-              selectPaymentMethod={selectPaymentMethodHandler}
-              isPayPalAvailable={shouldShowPayPal}
-              getDropIn={getDropIn}
-              onAdditionalDetails={onAdditionalDetails}
-            />
-          )}
+          <Suspense fallback={<Loader />}>{getPaymentDropIn()}</Suspense>
           {shouldShowPayPal &&
             showPayPalWhenAdyenIsReady() &&
             !isActionHandlingProcessing && (

vite.config.ts

@@ -3,9 +3,10 @@ import { defineConfig } from 'vite';
 import path from 'node:path';
 import react from '@vitejs/plugin-react-swc';
 import svgr from 'vite-plugin-svgr';
+import { manualChunksPlugin } from 'vite-plugin-webpackchunkname';
 
 export default defineConfig({
-  plugins: [react(), svgr({ include: '**/*.svg' })],
+  plugins: [react(), svgr({ include: '**/*.svg' }), manualChunksPlugin()],
   build: {
     target: 'es2015',
     cssCodeSplit: true,
@@ -25,6 +26,17 @@ export default defineConfig({
           react: 'React',
           'react-redux': 'reactRedux',
           'styled-components': 'styled-components'
+        },
+        manualChunks(id: string) {
+          if (id.includes('@adyen/adyen-web')) {
+            return 'adyen-library';
+          }
+
+          if (id.includes('@primer-io/checkout-web')) {
+            return 'primer-library';
+          }
+
+          return null;
         }
       }
     }