Merge pull request #10862 from DestinyItemManager/break-chunks

Move some stuff out of the initial chunk

src/app/App.tsx

@@ -15,12 +15,10 @@ import HotkeysCheatSheet from './hotkeys/HotkeysCheatSheet';
 import { t } from './i18next-t';
 import Login from './login/Login';
 import NotificationsContainer from './notifications/NotificationsContainer';
-import About from './shell/About';
 import DefaultAccount from './shell/DefaultAccount';
 import Destiny from './shell/Destiny';
 import GATracker from './shell/GATracker';
 import Header from './shell/Header';
-import Privacy from './shell/Privacy';
 import ScrollToTop from './shell/ScrollToTop';
 import SneakyUpdates from './shell/SneakyUpdates';
 
@@ -29,6 +27,8 @@ const SettingsPage = lazy(
   () => import(/* webpackChunkName: "settings" */ './settings/SettingsPage'),
 );
 const Debug = lazy(() => import(/* webpackChunkName: "debug" */ './debug/Debug'));
+const Privacy = lazy(() => import(/* webpackChunkName: "privacy" */ './shell/Privacy'));
+const About = lazy(() => import(/* webpackChunkName: "about" */ './shell/About'));
 
 export default function App() {
   const language = useSelector(settingSelector('language'));

src/app/armory/ArmoryPage.tsx

@@ -4,7 +4,7 @@ import { t } from 'app/i18next-t';
 import { useLoadStores } from 'app/inventory/store/hooks';
 import { usePageTitle } from 'app/utils/hooks';
 import { useLocation, useParams } from 'react-router';
-import Armory from './Armory';
+import Armory from './LazyArmory';
 
 export default function ArmoryPage({ account }: { account: DestinyAccount }) {
   usePageTitle(t('Armory.Armory'));

src/app/armory/ArmorySheet.tsx

@@ -3,9 +3,9 @@ import Sheet from 'app/dim-ui/Sheet';
 import { DimItem } from 'app/inventory/item-types';
 import { filterMap } from 'app/utils/collections';
 import focusingItemOutputs from 'data/d2/focusing-item-outputs.json';
-import { useMemo } from 'react';
-import Armory from './Armory';
+import { Suspense, useMemo } from 'react';
 import styles from './ArmorySheet.m.scss';
+import Armory from './LazyArmory';
 
 export default function ArmorySheet({
   item,
@@ -36,17 +36,19 @@ export default function ArmorySheet({
   const betterItemHash = item?.vendor && focusingItemOutputs[item.hash];
 
   return (
-    <Sheet onClose={onClose} sheetClassName={styles.sheet}>
-      <ClickOutsideRoot>
-        <Armory
-          itemHash={itemHash ?? betterItemHash ?? item.hash}
-          // Only use the sockets if we didn't change what item we're even looking at.
-          realItemSockets={betterItemHash === undefined ? realItemSockets : undefined}
-          realAvailablePlugHashes={
-            betterItemHash === undefined ? realAvailablePlugHashes : undefined
-          }
-        />
-      </ClickOutsideRoot>
-    </Sheet>
+    <Suspense fallback={null}>
+      <Sheet onClose={onClose} sheetClassName={styles.sheet}>
+        <ClickOutsideRoot>
+          <Armory
+            itemHash={itemHash ?? betterItemHash ?? item.hash}
+            // Only use the sockets if we didn't change what item we're even looking at.
+            realItemSockets={betterItemHash === undefined ? realItemSockets : undefined}
+            realAvailablePlugHashes={
+              betterItemHash === undefined ? realAvailablePlugHashes : undefined
+            }
+          />
+        </ClickOutsideRoot>
+      </Sheet>
+    </Suspense>
   );
 }

src/app/armory/LazyArmory.ts

@@ -0,0 +1,3 @@
+import { lazy } from 'react';
+
+export default lazy(() => import('./Armory' /* webpackChunkName: "armory" */));

src/app/item-popup/ItemPopupContainer.tsx

@@ -2,14 +2,15 @@ import { createItemContextSelector, sortedStoresSelector } from 'app/inventory/s
 import { DimStore } from 'app/inventory/store-types';
 import { applySocketOverrides } from 'app/inventory/store/override-sockets';
 import { useD2Definitions } from 'app/manifest/selectors';
-import { useEffect } from 'react';
+import { lazy, Suspense, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router';
 import { useSubscription } from 'use-subscription';
 import { DimItem } from '../inventory/item-types';
-import ItemPopup from './ItemPopup';
 import { hideItemPopup, showItemPopup$ } from './item-popup';
 
+const ItemPopup = lazy(() => import(/* webpackChunkName: "item-popup" */ './ItemPopup'));
+
 interface Props {
   boundarySelector?: string;
 }
@@ -44,14 +45,16 @@ export default function ItemPopupContainer({ boundarySelector }: Props) {
   }
 
   return (
-    <ItemPopup
-      key={item.index}
-      item={item}
-      boundarySelector={boundarySelector}
-      element={currentItem.element}
-      extraInfo={currentItem.extraInfo}
-      onClose={onClose}
-    />
+    <Suspense fallback={null}>
+      <ItemPopup
+        key={item.index}
+        item={item}
+        boundarySelector={boundarySelector}
+        element={currentItem.element}
+        extraInfo={currentItem.extraInfo}
+        onClose={onClose}
+      />
+    </Suspense>
   );
 }