adds an analyze command to help with bundle sizing (#627)

apps/web/next.config.js

@@ -1,3 +1,7 @@
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true',
+});
+
 const isProdEnv = process.env.NODE_ENV === 'production';
 
 const baseConfig = {
@@ -135,57 +139,60 @@ const securityHeaders = [
   },
 ];
 
-module.exports = extendBaseConfig({
-  transpilePackages: ['base-ui'],
-  i18n: {
-    locales: ['en'],
-    defaultLocale: 'en',
-  },
-  images: {
-    remotePatterns: [
-      {
-        protocol: 'https',
-        hostname: 'i.seadn.io',
-      },
-    ],
-  },
-  async headers() {
-    return [
-      {
-        source: '/:path*',
-        basePath: false,
-        headers: securityHeaders,
-      },
-    ];
-  },
-  async redirects() {
-    return [
-      {
-        source: '/careers',
-        destination: '/jobs',
-        permanent: true,
-      },
-      {
-        source: '/buildersummer',
-        destination: '/onchainsummer',
-        permanent: true,
-      },
-      {
-        source: '/onchainfont',
-        // just so the build doesn't fail in CI
-        destination: process.env.NEXT_PUBLIC_OCS_CREATIVE_DOWNLOAD_URL ?? '/',
-        permanent: false,
-      },
-      {
-        source: '/registry',
-        destination: 'https://buildonbase.deform.cc/registry/',
-        permanent: true,
-      },
-      {
-        source: '/registry-edit',
-        destination: 'https://buildonbase.deform.cc/registry-edit/',
-        permanent: true,
-      },
-    ];
+module.exports = extendBaseConfig(
+  {
+    transpilePackages: ['base-ui'],
+    i18n: {
+      locales: ['en'],
+      defaultLocale: 'en',
+    },
+    images: {
+      remotePatterns: [
+        {
+          protocol: 'https',
+          hostname: 'i.seadn.io',
+        },
+      ],
+    },
+    async headers() {
+      return [
+        {
+          source: '/:path*',
+          basePath: false,
+          headers: securityHeaders,
+        },
+      ];
+    },
+    async redirects() {
+      return [
+        {
+          source: '/careers',
+          destination: '/jobs',
+          permanent: true,
+        },
+        {
+          source: '/buildersummer',
+          destination: '/onchainsummer',
+          permanent: true,
+        },
+        {
+          source: '/onchainfont',
+          // just so the build doesn't fail in CI
+          destination: process.env.NEXT_PUBLIC_OCS_CREATIVE_DOWNLOAD_URL ?? '/',
+          permanent: false,
+        },
+        {
+          source: '/registry',
+          destination: 'https://buildonbase.deform.cc/registry/',
+          permanent: true,
+        },
+        {
+          source: '/registry-edit',
+          destination: 'https://buildonbase.deform.cc/registry-edit/',
+          permanent: true,
+        },
+      ];
+    },
   },
-});
+  [withBundleAnalyzer],
+);

apps/web/package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "start": "next start",
     "build": "next build",
+    "analyze": "ANALYZE=true next build",
     "dev": "next dev",
     "lint": "next lint",
     "update-contributors": "node ./scripts/updateContributors.js && npx prettier ./src/components/CoreContributors/CoreContributors.json -w"

package.json

@@ -76,6 +76,7 @@
   "packageManager": "[email protected]",
   "dependencies": {
     "@linaria/babel-preset": "^4.4.3",
+    "@next/bundle-analyzer": "^14.2.5",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-select": "^1.2.1",
     "classnames": "^2.3.2",

yarn.lock

@@ -1999,6 +1999,7 @@ __metadata:
     "@babel/preset-react": ^7.14.5
     "@graphql-eslint/eslint-plugin": ^3.10.4
     "@linaria/babel-preset": ^4.4.3
+    "@next/bundle-analyzer": ^14.2.5
     "@radix-ui/react-icons": ^1.3.0
     "@radix-ui/react-select": ^1.2.1
     "@swc/core": ^1.2.173
@@ -5135,6 +5136,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@next/bundle-analyzer@npm:^14.2.5":
+  version: 14.2.5
+  resolution: "@next/bundle-analyzer@npm:14.2.5"
+  dependencies:
+    webpack-bundle-analyzer: 4.10.1
+  checksum: 3721b494bb5d517e88d585f5b47b8cc4835d51e1c3f8784c17ac2cbe620e2e05b3efcb00e8082dad5315285eda6c4cef5b6c2f72219324b5d038e449ed4c52a6
+  languageName: node
+  linkType: hard
+
 "@next/env@npm:12.2.3":
   version: 12.2.3
   resolution: "@next/env@npm:12.2.3"
@@ -11905,6 +11915,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"debounce@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "debounce@npm:1.2.1"
+  checksum: 682a89506d9e54fb109526f4da255c5546102fbb8e3ae75eef3b04effaf5d4853756aee97475cd4650641869794e44f410eeb20ace2b18ea592287ab2038519e
+  languageName: node
+  linkType: hard
+
 "debug@npm:2.6.9, debug@npm:^2.6.0":
   version: 2.6.9
   resolution: "debug@npm:2.6.9"
@@ -15151,7 +15168,7 @@ __metadata:
   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
@@ -24896,6 +24913,29 @@ __metadata:
   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-bundle-analyzer@npm:^4.5.0":
   version: 4.9.1
   resolution: "webpack-bundle-analyzer@npm:4.9.1"