From 82c5c11affe98bffc308c864e1e5b13a31d11d1b Mon Sep 17 00:00:00 2001 From: m4tewoosh Date: Wed, 12 Feb 2025 12:22:28 +0100 Subject: [PATCH] feat/MSSDK-2126: add vite-plugin-webpackchunkname to fix code splitting --- package.json | 3 +- pnpm-lock.yaml | 28 ++++++++++++ src/components/Payment/Payment.tsx | 8 +++- .../UpdatePaymentDetailsPopup.jsx | 43 +++++++++++++------ vite.config.ts | 14 +++++- 5 files changed, 80 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index 800ad46d1..9e2b44b1a 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 693b1c457..8ec434208 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -77,6 +77,9 @@ importers: resolve: specifier: 1.22.0 version: 1.22.0 + vite-plugin-webpackchunkname: + specifier: ^1.0.3 + version: 1.0.3(rollup@4.23.0) devDependencies: '@testing-library/jest-dom': specifier: ^6.1.5 @@ -784,6 +787,15 @@ packages: react-redux: optional: true + '@rollup/plugin-alias@5.1.1': + resolution: {integrity: sha512-PR9zDb+rOzkRb2VD+EuKB7UC41vU5DIwZ5qqCpk0KJudcWAyi8rvYOhS7+L5aZCspw1stTViLgN5v6FF1p5cgQ==} + engines: {node: '>=14.0.0'} + peerDependencies: + rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0 + peerDependenciesMeta: + rollup: + optional: true + '@rollup/pluginutils@5.1.2': resolution: {integrity: sha512-/FIdS3PyZ39bjZlwqFnWqCOVnW7o963LtKMwQOD0NhQqw22gSr2YY1afu3FxRip4ZCZNsD5jq6Aaz6QV3D/Njw==} engines: {node: '>=14.0.0'} @@ -4040,6 +4052,9 @@ packages: peerDependencies: vite: ^2.6.0 || 3 || 4 || 5 + vite-plugin-webpackchunkname@1.0.3: + resolution: {integrity: sha512-88lt6IrgCumnf4Up8eyaSJbmo4V0ZIaR4M94fbZvGGmK2aWMmPGVsiFBszYE7Kq04I9tGjLFnyremn+KEgEGyw==} + vite@5.4.8: resolution: {integrity: sha512-FqrItQ4DT1NC4zCUqMB4c4AZORMKIa0m8/URVCZ77OZ/QSNeJ54bU1vrFADbDsuwfIPcgknRkmqakQcgnL4GiQ==} engines: {node: ^18.0.0 || >=20.0.0} @@ -4924,6 +4939,10 @@ snapshots: react: 18.3.1 react-redux: 8.1.3(@types/react-dom@18.3.0)(@types/react@18.3.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(redux@5.0.1) + '@rollup/plugin-alias@5.1.1(rollup@4.23.0)': + optionalDependencies: + rollup: 4.23.0 + '@rollup/pluginutils@5.1.2(rollup@4.23.0)': dependencies: '@types/estree': 1.0.6 @@ -8735,6 +8754,15 @@ snapshots: - supports-color - typescript + vite-plugin-webpackchunkname@1.0.3(rollup@4.23.0): + dependencies: + '@rollup/plugin-alias': 5.1.1(rollup@4.23.0) + '@rollup/pluginutils': 5.1.2(rollup@4.23.0) + es-module-lexer: 1.6.0 + magic-string: 0.30.17 + transitivePeerDependencies: + - rollup + vite@5.4.8(@types/node@20.16.10): dependencies: esbuild: 0.21.5 diff --git a/src/components/Payment/Payment.tsx b/src/components/Payment/Payment.tsx index 0cbafb1f0..2326e11f7 100644 --- a/src/components/Payment/Payment.tsx +++ b/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 } = diff --git a/src/components/UpdatePaymentDetailsPopup/UpdatePaymentDetailsPopup.jsx b/src/components/UpdatePaymentDetailsPopup/UpdatePaymentDetailsPopup.jsx index 1a39ee0bf..5411dd7ca 100644 --- a/src/components/UpdatePaymentDetailsPopup/UpdatePaymentDetailsPopup.jsx +++ b/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 ; + } + + if (shouldShowAdyen) { + return ( + + ); + } + + return null; + }; + if (step === PAYMENT_DETAILS_STEPS.DELETE_PAYMENT_DETAILS) { return ( { )} - {shouldShowAdyen && ( - - )} + }>{getPaymentDropIn()} {shouldShowPayPal && showPayPalWhenAdyenIsReady() && !isActionHandlingProcessing && ( diff --git a/vite.config.ts b/vite.config.ts index 1070e40e3..7f9f9bcef 100644 --- a/vite.config.ts +++ b/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; } } }