Merge pull request #153 from adrienne-deriv/optimise-some-bundles

Code split lodash and lazy load html2canvas

Author: farrah-deriv

src/components/Modals/NicknameModal/NicknameModal.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { debounce } from 'lodash';
+import debounce from 'lodash/debounce';
 import { Controller, useForm } from 'react-hook-form';
 import { useHistory } from 'react-router-dom';
 import { BUY_SELL_URL } from '@/constants';

src/components/Modals/NicknameModal/__tests__/NicknameModal.spec.tsx

@@ -10,9 +10,10 @@ const mockedUseAdvertiserCreate = api.advertiser.useCreate as jest.MockedFunctio
 const mockPush = jest.fn();
 const mockUseAdvertiserInfoState = useAdvertiserInfoState as jest.MockedFunction<typeof useAdvertiserInfoState>;
 
-jest.mock('lodash', () => ({
-    ...jest.requireActual('lodash'),
-    debounce: jest.fn(f => f),
+jest.mock('lodash/debounce', () => ({
+    ...jest.requireActual('lodash/debounce'),
+    __esModule: true,
+    default: jest.fn(f => f),
 }));
 
 jest.mock('react-router-dom', () => ({

src/components/Modals/ShareAdsModal/ShareAdsModal.tsx

@@ -1,5 +1,4 @@
 import { MouseEvent, useEffect, useRef } from 'react';
-import html2canvas from 'html2canvas';
 import { Clipboard } from '@/components';
 import { ADVERTISER_URL, BUY_SELL, RATE_TYPE } from '@/constants';
 import { api } from '@/hooks';
@@ -65,6 +64,7 @@ const ShareAdsModal = ({ id, isModalOpen, onRequestClose }: TShareAdsModalProps)
         if (divRef.current) {
             const p2pLogo = divRef.current.querySelector('.share-ads-card__qr-icon');
             if (p2pLogo) {
+                const { default: html2canvas } = await import('html2canvas');
                 const canvas = await html2canvas(divRef.current, { allowTaint: true, useCORS: true });
                 const screenshot = canvas.toDataURL('image/png', 1.0);
                 const fileName = `${type}_${id}.png`;

src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import clsx from 'clsx';
-import { debounce } from 'lodash';
+import debounce from 'lodash/debounce';
 import { Control, FieldValues, useForm } from 'react-hook-form';
 import { FullPageMobileWrapper } from '@/components';
 import { api } from '@/hooks';