From 1b9d7fff8612983e865b2a12d10ac7d0d21d9fb4 Mon Sep 17 00:00:00 2001
From: Reino Muhl <10620585+StaberindeZA@users.noreply.github.com>
Date: Fri, 15 Nov 2024 13:00:41 -0500
Subject: [PATCH] feat(next): reduce bundle size Because:

- The `payments-next` builds are taking very long and using many system
  resources.
- Under normal operation, the `payments-next` service in dev mode is
  using a lot of memory and at times running into its 7gb memory limit,
  causing a service restart.

This commit:

- Adds Next.js bundle analyzer to `payments-next`
- Adds additional packages to serverComponentsExternalPackages.
  - By default Nextjs automatically bundles dependencies used in Server
    Components and Route Handlers. As a result, all dependencies used in
    the NestApp were being bundled by Next.js, which bloated the Next.js
    nodejs bundle.
  - All dependencies used in the NestApp, should not be included in the
    Next.js bundle, and should therefore be added to
    `serverComponentsExternalPackages` going forward.
  - Dependencies that are potentially used by Next.js as part of server
    side rendering or hydration of pages should still be included in the
    Next.js bundle, and should not be added to
    `serverComponentsExternalPackages`.

Closes #FXA-10712
---
 apps/payments/next/next.config.js |  43 +++++++-
 package.json                      |   4 +
 packages/fxa-geodb/package.json   |   1 -
 yarn.lock                         | 159 +++++++++++++++++++++++++-----
 4 files changed, 175 insertions(+), 32 deletions(-)

diff --git a/apps/payments/next/next.config.js b/apps/payments/next/next.config.js
index 6745b8bfaa..e3030f8099 100644
--- a/apps/payments/next/next.config.js
+++ b/apps/payments/next/next.config.js
@@ -24,21 +24,48 @@ const nextConfig = {
   },
   experimental: {
     instrumentationHook: true,
+    optimizePackageImports: ['@radix-ui/react-form', '@radix-ui/react-tooltip'],
     serverComponentsExternalPackages: [
-      '@nestjs/core',
-      '@nestjs/common',
-      '@nestjs/websockets',
-      '@nestjs/graphql',
-      '@nestjs/mapped-types',
+      'axios',
+      '@apollo',
+      '@faker-js/faker',
+      '@google-cloud/firestore',
+      '@grpc',
+      "@nestjs/apollo",
+      "@nestjs/common",
+      "@nestjs/config",
+      "@nestjs/core",
+      "@nestjs/graphql",
+      "@nestjs/mapped-types",
+      "@nestjs/passport",
+      "@nestjs/platform-express",
+      "@nestjs/schedule",
+      '@opentelemetry',
+      '@prisma/instrumentation',
+      '@sentry',
+      '@sentry/node',
+      '@sentry/nestjs',
+      '@sentry/open-telemetry',
+      '@type-cacheable/core',
+      'aws-sdk',
       'class-transformer',
       'class-validator',
+      'google-gax',
+      'graphql',
+      'graphql-request',
       'hot-shots',
       'knex',
       'kysely',
+      'maxmind',
       'mozlog',
       'mysql2',
       'nest-typed-config',
+      'nest-winston',
+      'objection',
       'superagent',
+      'typedi',
+      'whatwg-url',
+      'winston',
     ],
   },
   images: {
@@ -99,6 +126,11 @@ const sentryOptions = {
   disableLogger: true,
 }
 
+// Bundle Analyzer
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true',
+});
+
 // Use withSentryConfig to wrap the next config
 const sentryEnhancedConfig = (passedConfig) =>
   withSentryConfig(passedConfig, sentryOptions);
@@ -107,6 +139,7 @@ const plugins = [
   // Add more Next.js plugins to this list if needed.
   withNx,
   sentryEnhancedConfig,
+  withBundleAnalyzer,
 ];
 
 module.exports = composePlugins(...plugins)(nextConfig);
diff --git a/package.json b/package.json
index b20c248314..572ad23403 100644
--- a/package.json
+++ b/package.json
@@ -73,6 +73,8 @@
     "@sentry/nextjs": "^8.38.0",
     "@sentry/node": "^8.38.0",
     "@sentry/opentelemetry": "^8.38.0",
+    "@stripe/react-stripe-js": "^2.7.1",
+    "@stripe/stripe-js": "^4.9.0",
     "@swc/helpers": "0.5.11",
     "@type-cacheable/core": "^14.1.0",
     "@type-cacheable/ioredis-adapter": "^10.0.4",
@@ -93,6 +95,7 @@
     "knex": "^3.1.0",
     "kysely": "^0.27.2",
     "lint-staged": "^15.2.0",
+    "maxmind": "^4.3.22",
     "module-alias": "^2.2.3",
     "mozlog": "^3.0.2",
     "mysql": "^2.18.1",
@@ -164,6 +167,7 @@
     "@nestjs/cli": "^10.4.2",
     "@nestjs/schematics": "^10.2.3",
     "@nestjs/testing": "^10.3.4",
+    "@next/bundle-analyzer": "^15.0.3",
     "@nx/esbuild": "19.5.3",
     "@nx/eslint-plugin": "19.5.3",
     "@nx/jest": "19.5.3",
diff --git a/packages/fxa-geodb/package.json b/packages/fxa-geodb/package.json
index 84386f7dd5..a076f4dcef 100644
--- a/packages/fxa-geodb/package.json
+++ b/packages/fxa-geodb/package.json
@@ -33,7 +33,6 @@
   "dependencies": {
     "bluebird": "^3.7.2",
     "cron": "3.2.1",
-    "maxmind": "^4.3.6",
     "mozlog": "^3.0.2",
     "request": "^2.88.2"
   },
diff --git a/yarn.lock b/yarn.lock
index ccbe08d009..18054ab64b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8621,6 +8621,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@discoveryjs/json-ext@npm:0.5.7":
+  version: 0.5.7
+  resolution: "@discoveryjs/json-ext@npm:0.5.7"
+  checksum: 2176d301cc258ea5c2324402997cf8134ebb212469c0d397591636cea8d3c02f2b3cf9fd58dcb748c7a0dade77ebdc1b10284fa63e608c033a1db52fddc69918
+  languageName: node
+  linkType: hard
+
 "@discoveryjs/json-ext@npm:^0.5.0, @discoveryjs/json-ext@npm:^0.5.3":
   version: 0.5.3
   resolution: "@discoveryjs/json-ext@npm:0.5.3"
@@ -13652,6 +13659,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@next/bundle-analyzer@npm:^15.0.3":
+  version: 15.0.3
+  resolution: "@next/bundle-analyzer@npm:15.0.3"
+  dependencies:
+    webpack-bundle-analyzer: 4.10.1
+  checksum: 79c7c3bfdcbe33d153e7008fd90bae7d8c0c44e5c5647ffc9441bf9553eea0e1d03c97d25eae6364204d160dca87d4a4e0749d571ed85e4435e5f0f086fa89ce
+  languageName: node
+  linkType: hard
+
 "@next/env@npm:14.2.14":
   version: 14.2.14
   resolution: "@next/env@npm:14.2.14"
@@ -16335,6 +16351,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@polka/url@npm:^1.0.0-next.24":
+  version: 1.0.0-next.28
+  resolution: "@polka/url@npm:1.0.0-next.28"
+  checksum: 7402aaf1de781d0eb0870d50cbcd394f949aee11b38a267a5c3b4e3cfee117e920693e6e93ce24c87ae2d477a59634f39d9edde8e86471cae756839b07c79af7
+  languageName: node
+  linkType: hard
+
 "@popperjs/core@npm:^2.4.4, @popperjs/core@npm:^2.5.4, @popperjs/core@npm:^2.6.0":
   version: 2.9.2
   resolution: "@popperjs/core@npm:2.9.2"
@@ -27303,6 +27326,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"acorn-walk@npm:^8.0.0":
+  version: 8.3.4
+  resolution: "acorn-walk@npm:8.3.4"
+  dependencies:
+    acorn: ^8.11.0
+  checksum: 4ff03f42323e7cf90f1683e08606b0f460e1e6ac263d2730e3df91c7665b6f64e696db6ea27ee4bed18c2599569be61f28a8399fa170c611161a348c402ca19c
+  languageName: node
+  linkType: hard
+
 "acorn-walk@npm:^8.0.2, acorn-walk@npm:^8.1.1":
   version: 8.2.0
   resolution: "acorn-walk@npm:8.2.0"
@@ -27337,6 +27369,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"acorn@npm:^8.0.4, acorn@npm:^8.11.0, acorn@npm:^8.14.0":
+  version: 8.14.0
+  resolution: "acorn@npm:8.14.0"
+  bin:
+    acorn: bin/acorn
+  checksum: 8755074ba55fff94e84e81c72f1013c2d9c78e973c31231c8ae505a5f966859baf654bddd75046bffd73ce816b149298977fff5077a3033dedba0ae2aad152d4
+  languageName: node
+  linkType: hard
+
 "acorn@npm:^8.1.0, acorn@npm:^8.8.1":
   version: 8.8.2
   resolution: "acorn@npm:8.8.2"
@@ -27364,15 +27405,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^8.14.0":
-  version: 8.14.0
-  resolution: "acorn@npm:8.14.0"
-  bin:
-    acorn: bin/acorn
-  checksum: 8755074ba55fff94e84e81c72f1013c2d9c78e973c31231c8ae505a5f966859baf654bddd75046bffd73ce816b149298977fff5077a3033dedba0ae2aad152d4
-  languageName: node
-  linkType: hard
-
 "acorn@npm:^8.2.4, acorn@npm:^8.4.1":
   version: 8.5.0
   resolution: "acorn@npm:8.5.0"
@@ -34842,7 +34874,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debounce@npm:^1.2.0":
+"debounce@npm:^1.2.0, debounce@npm:^1.2.1":
   version: 1.2.1
   resolution: "debounce@npm:1.2.1"
   checksum: 682a89506d9e54fb109526f4da255c5546102fbb8e3ae75eef3b04effaf5d4853756aee97475cd4650641869794e44f410eeb20ace2b18ea592287ab2038519e
@@ -41351,7 +41383,6 @@ fsevents@~2.1.1:
     cron: 3.2.1
     eslint: ^8.19.0
     fxa-shared: "workspace:*"
-    maxmind: ^4.3.6
     mocha: ^10.4.0
     mozlog: ^3.0.2
     nyc: ^17.1.0
@@ -41893,6 +41924,7 @@ fsevents@~2.1.1:
     "@nestjs/schedule": ^4.0.1
     "@nestjs/schematics": ^10.2.3
     "@nestjs/testing": ^10.3.4
+    "@next/bundle-analyzer": ^15.0.3
     "@nx/esbuild": 19.5.3
     "@nx/eslint-plugin": 19.5.3
     "@nx/jest": 19.5.3
@@ -41923,6 +41955,8 @@ fsevents@~2.1.1:
     "@storybook/html-webpack5": ^7.6.13
     "@storybook/nextjs": ^7.6.14
     "@storybook/react-webpack5": ^7.4.5
+    "@stripe/react-stripe-js": ^2.7.1
+    "@stripe/stripe-js": ^4.9.0
     "@swc-node/register": 1.10.9
     "@swc/cli": 0.5.0
     "@swc/core": 1.5.29
@@ -41987,6 +42021,7 @@ fsevents@~2.1.1:
     knex: ^3.1.0
     kysely: ^0.27.2
     lint-staged: ^15.2.0
+    maxmind: ^4.3.22
     mocha-junit-reporter: ^2.2.0
     mocha-multi: ^1.1.7
     module-alias: ^2.2.3
@@ -44410,7 +44445,7 @@ fsevents@~2.1.1:
   languageName: node
   linkType: hard
 
-"html-escaper@npm:^2.0.0":
+"html-escaper@npm:^2.0.0, html-escaper@npm:^2.0.2":
   version: 2.0.2
   resolution: "html-escaper@npm:2.0.2"
   checksum: d2df2da3ad40ca9ee3a39c5cc6475ef67c8f83c234475f24d8e9ce0dc80a2c82df8e1d6fa78ddd1e9022a586ea1bd247a615e80a5cd9273d90111ddda7d9e974
@@ -51798,13 +51833,13 @@ fsevents@~2.1.1:
   languageName: node
   linkType: hard
 
-"maxmind@npm:^4.3.6":
-  version: 4.3.6
-  resolution: "maxmind@npm:4.3.6"
+"maxmind@npm:^4.3.22":
+  version: 4.3.22
+  resolution: "maxmind@npm:4.3.22"
   dependencies:
-    mmdb-lib: 2.0.2
-    tiny-lru: 8.0.2
-  checksum: 5ffa7d685d7cf0d31cb1be9fa2e38b31f9bfc735c7f3911b8d9e511348d6912277e333d943361973b3dc2707a618d81b6d3fd0d31507bd6294e1e4378ac720bd
+    mmdb-lib: 2.1.1
+    tiny-lru: 11.2.11
+  checksum: 1112ce535c2c155610cf25983deee30e3dbe046b18feef72e11c8fd56e5905b0aacc1da520142f9e7caa5e9cb59b988d34e430773cebbbe699e295be1f13188b
   languageName: node
   linkType: hard
 
@@ -53368,10 +53403,10 @@ fsevents@~2.1.1:
   languageName: node
   linkType: hard
 
-"mmdb-lib@npm:2.0.2":
-  version: 2.0.2
-  resolution: "mmdb-lib@npm:2.0.2"
-  checksum: a8e3b6c81300915e351a34e46d89471f32d9ff2ee35b857901afed563d261cad90d8dd395898528d9430dfe6e015507c0bf290f56341efd691eec2ce21507c7b
+"mmdb-lib@npm:2.1.1":
+  version: 2.1.1
+  resolution: "mmdb-lib@npm:2.1.1"
+  checksum: 8208ef6a0910062f68caaf8ea79dab64b4a363b34b6c73f537e1a22b63cb4a7174bc4862ec0cc1431dce2031b4b87ce6b6860971bd2c86f21a2fb9aeddd7484e
   languageName: node
   linkType: hard
 
@@ -53598,6 +53633,13 @@ fsevents@~2.1.1:
   languageName: node
   linkType: hard
 
+"mrmime@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "mrmime@npm:2.0.0"
+  checksum: f6fe11ec667c3d96f1ce5fd41184ed491d5f0a5f4045e82446a471ccda5f84c7f7610dff61d378b73d964f73a320bd7f89788f9e6b9403e32cc4be28ba99f569
+  languageName: node
+  linkType: hard
+
 "ms@npm:2.0.0":
   version: 2.0.0
   resolution: "ms@npm:2.0.0"
@@ -55690,6 +55732,15 @@ fsevents@~2.1.1:
   languageName: node
   linkType: hard
 
+"opener@npm:^1.5.2":
+  version: 1.5.2
+  resolution: "opener@npm:1.5.2"
+  bin:
+    opener: bin/opener-bin.js
+  checksum: 33b620c0d53d5b883f2abc6687dd1c5fd394d270dbe33a6356f2d71e0a2ec85b100d5bac94694198ccf5c30d592da863b2292c5539009c715a9c80c697b4f6cc
+  languageName: node
+  linkType: hard
+
 "opn@npm:5.4.0":
   version: 5.4.0
   resolution: "opn@npm:5.4.0"
@@ -63770,6 +63821,17 @@ resolve@1.1.7:
   languageName: node
   linkType: hard
 
+"sirv@npm:^2.0.3":
+  version: 2.0.4
+  resolution: "sirv@npm:2.0.4"
+  dependencies:
+    "@polka/url": ^1.0.0-next.24
+    mrmime: ^2.0.0
+    totalist: ^3.0.0
+  checksum: 6853384a51d6ee9377dd657e2b257e0e98b29abbfbfa6333e105197f0f100c8c56a4520b47028b04ab1833cf2312526206f38fcd4f891c6df453f40da1a15a57
+  languageName: node
+  linkType: hard
+
 "sisteransi@npm:^1.0.5":
   version: 1.0.5
   resolution: "sisteransi@npm:1.0.5"
@@ -66838,10 +66900,10 @@ resolve@1.1.7:
   languageName: node
   linkType: hard
 
-"tiny-lru@npm:8.0.2":
-  version: 8.0.2
-  resolution: "tiny-lru@npm:8.0.2"
-  checksum: ec4d884914626760eef05cd57850f21a153adeeb7c4242eb8d44a031f1bd8489f18c1bf5d6f10f0a11c5dcfe03b302f26b00f2b879b38853599486bf0dca8c97
+"tiny-lru@npm:11.2.11":
+  version: 11.2.11
+  resolution: "tiny-lru@npm:11.2.11"
+  checksum: ace3a44b53cc2ddd76e2c4b3685e75107a6504a0bf034e360c662bf70bab93a854905329114c16e5c37d8b9345d4389f626dbd3e962e81ab51f1922cbdab7668
   languageName: node
   linkType: hard
 
@@ -67032,6 +67094,13 @@ resolve@1.1.7:
   languageName: node
   linkType: hard
 
+"totalist@npm:^3.0.0":
+  version: 3.0.1
+  resolution: "totalist@npm:3.0.1"
+  checksum: 5132d562cf88ff93fd710770a92f31dbe67cc19b5c6ccae2efc0da327f0954d211bbfd9456389655d726c624f284b4a23112f56d1da931ca7cfabbe1f45e778a
+  languageName: node
+  linkType: hard
+
 "touch@npm:^3.1.0":
   version: 3.1.0
   resolution: "touch@npm:3.1.0"
@@ -69436,6 +69505,29 @@ resolve@1.1.7:
   languageName: node
   linkType: hard
 
+"webpack-bundle-analyzer@npm:4.10.1":
+  version: 4.10.1
+  resolution: "webpack-bundle-analyzer@npm:4.10.1"
+  dependencies:
+    "@discoveryjs/json-ext": 0.5.7
+    acorn: ^8.0.4
+    acorn-walk: ^8.0.0
+    commander: ^7.2.0
+    debounce: ^1.2.1
+    escape-string-regexp: ^4.0.0
+    gzip-size: ^6.0.0
+    html-escaper: ^2.0.2
+    is-plain-object: ^5.0.0
+    opener: ^1.5.2
+    picocolors: ^1.0.0
+    sirv: ^2.0.3
+    ws: ^7.3.1
+  bin:
+    webpack-bundle-analyzer: lib/bin/analyzer.js
+  checksum: 77f48f10a493b1cc95674526472978a2de32412ddbf556bd3903738f14890611426f19477352993efe5a9fd6ca16711eb912d986f2221b17ba6eeca1b6f71fb6
+  languageName: node
+  linkType: hard
+
 "webpack-cli@npm:^5.1.4":
   version: 5.1.4
   resolution: "webpack-cli@npm:5.1.4"
@@ -70849,6 +70941,21 @@ resolve@1.1.7:
   languageName: node
   linkType: hard
 
+"ws@npm:^7.3.1":
+  version: 7.5.10
+  resolution: "ws@npm:7.5.10"
+  peerDependencies:
+    bufferutil: ^4.0.1
+    utf-8-validate: ^5.0.2
+  peerDependenciesMeta:
+    bufferutil:
+      optional: true
+    utf-8-validate:
+      optional: true
+  checksum: f9bb062abf54cc8f02d94ca86dcd349c3945d63851f5d07a3a61c2fcb755b15a88e943a63cf580cbdb5b74436d67ef6b67f745b8f7c0814e411379138e1863cb
+  languageName: node
+  linkType: hard
+
 "ws@npm:^8.11.0, ws@npm:^8.12.0, ws@npm:^8.13.0, ws@npm:^8.2.3":
   version: 8.14.2
   resolution: "ws@npm:8.14.2"