diff --git a/packages/desktop-client/src/components/LoggedInUser.js b/packages/desktop-client/src/components/LoggedInUser.js
index ba41e9cbe2b15958b6d2f36e8ab847040e33237c..5692064a8fa2b9564bb284ada380abd3ac9a1bbf 100644
--- a/packages/desktop-client/src/components/LoggedInUser.js
+++ b/packages/desktop-client/src/components/LoggedInUser.js
@@ -1,20 +1,13 @@
 import React, { useState, useEffect } from 'react';
 import { connect } from 'react-redux';
 
-import { css } from 'glamor';
-
 import * as actions from 'loot-core/src/client/actions';
 
-import { colors } from '../style';
+import { colors, styles } from '../style';
 
 import { View, Text, Button, Tooltip, Menu } from './common';
 import { useServerURL } from './ServerContext';
 
-let fade = css.keyframes({
-  '0%': { opacity: 0 },
-  '100%': { opacity: 1 },
-});
-
 function LoggedInUser({
   hideIfNoServer,
   userData,
@@ -82,11 +75,8 @@ function LoggedInUser({
           {
             color: colors.n5,
             fontStyle: 'italic',
-            animationName: fade,
-            animationDuration: '0.2s',
-            animationFillMode: 'both',
-            animationDelay: '0.5s',
           },
+          styles.delayedFadeIn,
           style,
         ]}
       >
diff --git a/packages/desktop-client/src/components/reports/ReportRouter.js b/packages/desktop-client/src/components/reports/ReportRouter.js
new file mode 100644
index 0000000000000000000000000000000000000000..745a198c90cb7195f47ab0b09e12360ec8c46ba9
--- /dev/null
+++ b/packages/desktop-client/src/components/reports/ReportRouter.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Route, Routes } from 'react-router-dom';
+
+import CashFlow from './CashFlow';
+import NetWorth from './NetWorth';
+import Overview from './Overview';
+
+export function ReportRouter() {
+  return (
+    <Routes>
+      <Route path="/" element={<Overview />} />
+      <Route path="/net-worth" element={<NetWorth />} />
+      <Route path="/cash-flow" element={<CashFlow />} />
+    </Routes>
+  );
+}
diff --git a/packages/desktop-client/src/components/reports/index.js b/packages/desktop-client/src/components/reports/index.js
deleted file mode 100644
index b0ccfe63c3e82f501e525bc4358ef547431f102c..0000000000000000000000000000000000000000
--- a/packages/desktop-client/src/components/reports/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import { Route, Routes } from 'react-router-dom';
-
-import { View } from '../common';
-
-import CashFlow from './CashFlow';
-import NetWorth from './NetWorth';
-import Overview from './Overview';
-
-export default function Reports() {
-  return (
-    <View style={{ flex: 1 }} data-testid="reports-page">
-      <Routes>
-        <Route path="/" element={<Overview />} />
-        <Route path="/net-worth" element={<NetWorth />} />
-        <Route path="/cash-flow" element={<CashFlow />} />
-      </Routes>
-    </View>
-  );
-}
diff --git a/packages/desktop-client/src/components/reports/index.tsx b/packages/desktop-client/src/components/reports/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4d110091bd7c854ebaa36d09de5e9b2a6730fc3e
--- /dev/null
+++ b/packages/desktop-client/src/components/reports/index.tsx
@@ -0,0 +1,44 @@
+import { useState, useEffect } from 'react';
+
+import AnimatedLoading from '../../icons/AnimatedLoading';
+import { colors, styles } from '../../style';
+import { Block, View } from '../common';
+
+import type { ReportRouter } from './ReportRouter';
+
+export default function Reports() {
+  let [ReportRouterComponent, setReportRouter] = useState<
+    typeof ReportRouter | null
+  >(null);
+
+  useEffect(() => {
+    import(/* webpackChunkName: 'reports' */ './ReportRouter').then(module => {
+      setReportRouter(() => module.ReportRouter);
+    });
+  }, []);
+
+  return (
+    <View style={{ flex: 1 }} data-testid="reports-page">
+      {ReportRouterComponent ? (
+        <ReportRouterComponent />
+      ) : (
+        <View
+          style={[
+            {
+              flex: 1,
+              gap: 20,
+              justifyContent: 'center',
+              alignItems: 'center',
+            },
+            styles.delayedFadeIn,
+          ]}
+        >
+          <Block style={{ marginBottom: 20, fontSize: 18 }}>
+            Loading reports…
+          </Block>
+          <AnimatedLoading width={25} color={colors.n1} />
+        </View>
+      )}
+    </View>
+  );
+}
diff --git a/packages/desktop-client/src/polyfills.ts b/packages/desktop-client/src/polyfills.ts
index 0b58bbcbffb17d74d47f4caab1a638649505f1c4..e85c5815cce8b2a456ff9fdaf4e26517e6980c1d 100644
--- a/packages/desktop-client/src/polyfills.ts
+++ b/packages/desktop-client/src/polyfills.ts
@@ -1,6 +1,8 @@
 export default async function installPolyfills(): Promise<void> {
   if ('ResizeObserver' in window === false) {
-    const module = await import('@juggle/resize-observer');
+    const module = await import(
+      /* webpackChunkName: 'resize-observer-polyfill' */ '@juggle/resize-observer'
+    );
     window.ResizeObserver = module.ResizeObserver;
   }
 }
diff --git a/packages/desktop-client/src/style.tsx b/packages/desktop-client/src/style.tsx
index 13dbcc255f413ac40c775d233341176125bff252..5e3807eee2f4856e45587110e0e63306fc965969 100644
--- a/packages/desktop-client/src/style.tsx
+++ b/packages/desktop-client/src/style.tsx
@@ -1,3 +1,5 @@
+import { keyframes } from 'glamor';
+
 import * as Platform from 'loot-core/src/client/platform';
 
 import tokens from './tokens';
@@ -169,6 +171,15 @@ export const styles = {
     // lineHeight: 22.4 // TODO: This seems like trouble, but what's the right value?
   },
   textColor: colors.n1,
+  delayedFadeIn: {
+    animationName: keyframes({
+      '0%': { opacity: 0 },
+      '100%': { opacity: 1 },
+    }),
+    animationDuration: '0.2s',
+    animationFillMode: 'both',
+    animationDelay: '0.5s',
+  },
   // Dynamically set
   lightScrollbar: undefined,
   darkScrollbar: undefined,
diff --git a/upcoming-release-notes/1210.md b/upcoming-release-notes/1210.md
new file mode 100644
index 0000000000000000000000000000000000000000..2b0ea007c02e6a07601d70e02a5f218c2a8dfd3d
--- /dev/null
+++ b/upcoming-release-notes/1210.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [j-f1]
+---
+
+Move the report pages to a separate Webpack chunk to reduce the size of the main bundle by 25%.