Add @next/bundle-analyzer (#929)

ooni · Apr 16, 2024 · 3011499 · 3011499
1 parent c3872ef
commit 3011499
Show file tree

Hide file tree

Showing 4 changed files with 1,782 additions and 1,710 deletions.
diff --git a/next.config.js b/next.config.js
@@ -7,6 +7,9 @@ const glob = require('glob')
 const { dirname, basename, resolve } = require('path')
 const { execSync } = require('child_process')
 
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true',
+})
 
 const LANG_DIR = './public/static/lang/'
 const DEFAULT_LOCALE = 'en'
@@ -20,126 +23,140 @@ function getSupportedLanguages() {
   return [...supportedLanguages]
 }
 
-module.exports = withSentryConfig(
-  {
-    output: 'standalone',
-    async redirects() {
-      return [
-        {
-          source: '/experimental/mat',
-          destination: '/chart/mat',
-          permanent: true,
-        },
-      ]
-    },
-    compiler: {
-      // see https://styled-components.com/docs/tooling#babel-plugin for more info on the options.
-      styledComponents: {
-        ssr: true,
+module.exports = withBundleAnalyzer(
+  withSentryConfig(
+    {
+      output: 'standalone',
+      async redirects() {
+        return [
+          {
+            source: '/experimental/mat',
+            destination: '/chart/mat',
+            permanent: true,
+          },
+        ]
       },
-    },
-    i18n: {
-      locales: getSupportedLanguages(),
-      defaultLocale: DEFAULT_LOCALE,
-    },
-    webpack: (config, options) => {
-      const gitCommitSHAShort = process.env.RUN_GIT_COMMIT_SHA_SHORT ? execSync(process.env.RUN_GIT_COMMIT_SHA_SHORT) : ''
-      const gitCommitSHA = process.env.RUN_GIT_COMMIT_SHA ? execSync(process.env.RUN_GIT_COMMIT_SHA) : ''
-      const gitCommitRef = process.env.RUN_GIT_COMMIT_REF ? execSync(process.env.RUN_GIT_COMMIT_REF) : ''
-      const gitCommitTags = process.env.RUN_GIT_COMMIT_TAGS ? execSync(process.env.RUN_GIT_COMMIT_TAGS) : ''
-
-      config.plugins.push(
-        new options.webpack.DefinePlugin({
-          'process.env.GIT_COMMIT_SHA_SHORT': JSON.stringify(
-            gitCommitSHAShort.toString()
-          ),
-          'process.env.GIT_COMMIT_SHA': JSON.stringify(gitCommitSHA.toString()),
-          'process.env.GIT_COMMIT_REF': JSON.stringify(gitCommitRef.toString()),
-          'process.env.GIT_COMMIT_TAGS': JSON.stringify(
-            gitCommitTags.toString()
-          ),
-          'process.env.DEFAULT_LOCALE': DEFAULT_LOCALE,
-          'process.env.LOCALES': JSON.stringify(getSupportedLanguages()),
-          'process.env.WDYR': JSON.stringify(process.env.WDYR),
-        })
-      )
-
-      // SVG
-      // Grab the existing rule that handles SVG imports
-      const fileLoaderRule = config.module.rules.find((rule) =>
-        rule.test?.test?.('.svg'),
-      )
-
-      config.module.rules.push(
-        // Convert all *.svg imports to React components
-        {
-          test: /\.svg$/i,
-          issuer: /\.[jt]sx?$/,
-          use: ['@svgr/webpack'],
+      compiler: {
+        // see https://styled-components.com/docs/tooling#babel-plugin for more info on the options.
+        styledComponents: {
+          ssr: true,
         },
-      )
-
-      // Modify the file loader rule to ignore *.svg, since we have it handled
-      fileLoaderRule.exclude = /\.svg$/i
-
-      // whyDidYouRender
-      if (options.dev && !options.isServer) {
-        const originalEntry = config.entry
-        config.entry = async () => {
-          const wdrPath = resolve(__dirname, './scripts/wdyr.js')
-          const entries = await originalEntry()
-          if (entries['main.js'] && !entries['main.js'].includes(wdrPath)) {
-            entries['main.js'].unshift(wdrPath)
+      },
+      i18n: {
+        locales: getSupportedLanguages(),
+        defaultLocale: DEFAULT_LOCALE,
+      },
+      webpack: (config, options) => {
+        const gitCommitSHAShort = process.env.RUN_GIT_COMMIT_SHA_SHORT
+          ? execSync(process.env.RUN_GIT_COMMIT_SHA_SHORT)
+          : ''
+        const gitCommitSHA = process.env.RUN_GIT_COMMIT_SHA
+          ? execSync(process.env.RUN_GIT_COMMIT_SHA)
+          : ''
+        const gitCommitRef = process.env.RUN_GIT_COMMIT_REF
+          ? execSync(process.env.RUN_GIT_COMMIT_REF)
+          : ''
+        const gitCommitTags = process.env.RUN_GIT_COMMIT_TAGS
+          ? execSync(process.env.RUN_GIT_COMMIT_TAGS)
+          : ''
+
+        config.plugins.push(
+          new options.webpack.DefinePlugin({
+            'process.env.GIT_COMMIT_SHA_SHORT': JSON.stringify(
+              gitCommitSHAShort.toString(),
+            ),
+            'process.env.GIT_COMMIT_SHA': JSON.stringify(
+              gitCommitSHA.toString(),
+            ),
+            'process.env.GIT_COMMIT_REF': JSON.stringify(
+              gitCommitRef.toString(),
+            ),
+            'process.env.GIT_COMMIT_TAGS': JSON.stringify(
+              gitCommitTags.toString(),
+            ),
+            'process.env.DEFAULT_LOCALE': DEFAULT_LOCALE,
+            'process.env.LOCALES': JSON.stringify(getSupportedLanguages()),
+            'process.env.WDYR': JSON.stringify(process.env.WDYR),
+          }),
+        )
+
+        // SVG
+        // Grab the existing rule that handles SVG imports
+        const fileLoaderRule = config.module.rules.find((rule) =>
+          rule.test?.test?.('.svg'),
+        )
+
+        config.module.rules.push(
+          // Convert all *.svg imports to React components
+          {
+            test: /\.svg$/i,
+            issuer: /\.[jt]sx?$/,
+            use: ['@svgr/webpack'],
+          },
+        )
+
+        // Modify the file loader rule to ignore *.svg, since we have it handled
+        fileLoaderRule.exclude = /\.svg$/i
+
+        // whyDidYouRender
+        if (options.dev && !options.isServer) {
+          const originalEntry = config.entry
+          config.entry = async () => {
+            const wdrPath = resolve(__dirname, './scripts/wdyr.js')
+            const entries = await originalEntry()
+            if (entries['main.js'] && !entries['main.js'].includes(wdrPath)) {
+              entries['main.js'].unshift(wdrPath)
+            }
+            return entries
           }
-          return entries
         }
-      }
-
-      if (!options.isServer) {
-        config.resolve.fallback = {
-          ...config.resolve.fallback,  
-          fs: false,
+
+        if (!options.isServer) {
+          config.resolve.fallback = {
+            ...config.resolve.fallback,
+            fs: false,
+          }
         }
-      }
-
-      return config
+
+        return config
+      },
+      productionBrowserSourceMaps: true,
+    },
+    {
+      // For all available options, see:
+      // https://github.com/getsentry/sentry-webpack-plugin#options
+      debug: process.env.NODE_ENV === 'development',
+      dryRun: process.env.NODE_ENV === 'development',
+      release: process.env.GIT_COMMIT_SHA,
+      // Suppresses source map uploading logs during build
+      silent: true,
+      org: 'ooni',
+      project: 'explorer',
+    },
+    {
+      // For all available options, see:
+      // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+
+      // Upload a larger set of source maps for prettier stack traces (increases build time)
+      widenClientFileUpload: true,
+
+      // Transpiles SDK to be compatible with IE11 (increases bundle size)
+      transpileClientSDK: true,
+
+      // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
+      tunnelRoute: '/monitoring',
+
+      // Hides source maps from generated client bundles
+      hideSourceMaps: true,
+
+      // Automatically tree-shake Sentry logger statements to reduce bundle size
+      disableLogger: true,
+
+      // Enables automatic instrumentation of Vercel Cron Monitors.
+      // See the following for more information:
+      // https://docs.sentry.io/product/crons/
+      // https://vercel.com/docs/cron-jobs
+      automaticVercelMonitors: true,
     },
-    productionBrowserSourceMaps: true,
-  },
-  {
-    // For all available options, see:
-    // https://github.com/getsentry/sentry-webpack-plugin#options
-    debug: process.env.NODE_ENV === 'development',
-    dryRun: process.env.NODE_ENV === 'development',
-    release: process.env.GIT_COMMIT_SHA,
-    // Suppresses source map uploading logs during build
-    silent: true,
-    org: "ooni",
-    project: "explorer",
-  },
-  {
-    // For all available options, see:
-    // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
-
-    // Upload a larger set of source maps for prettier stack traces (increases build time)
-    widenClientFileUpload: true,
-
-    // Transpiles SDK to be compatible with IE11 (increases bundle size)
-    transpileClientSDK: true,
-
-    // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
-    tunnelRoute: "/monitoring",
-
-    // Hides source maps from generated client bundles
-    hideSourceMaps: true,
-
-    // Automatically tree-shake Sentry logger statements to reduce bundle size
-    disableLogger: true,
-
-    // Enables automatic instrumentation of Vercel Cron Monitors.
-    // See the following for more information:
-    // https://docs.sentry.io/product/crons/
-    // https://vercel.com/docs/cron-jobs
-    automaticVercelMonitors: true,
-  }
-);
+  ),
+)
diff --git a/package.json b/package.json
@@ -58,6 +58,7 @@
     "jackspeak": "2.1.1"
   },
   "devDependencies": {
+    "@next/bundle-analyzer": "^14.2.1",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/cypress": "^10.0.1",
     "@welldone-software/why-did-you-render": "^8.0.1",

diff --git a/public/mockServiceWorker.js b/public/mockServiceWorker.js
@@ -2,13 +2,14 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (2.1.0).
+ * Mock Service Worker.
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.
  */
 
-const INTEGRITY_CHECKSUM = '223d191a56023cd36aa88c802961b911'
+const PACKAGE_VERSION = '2.2.13'
+const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -48,7 +49,10 @@ self.addEventListener('message', async function (event) {
     case 'INTEGRITY_CHECK_REQUEST': {
       sendToClient(client, {
         type: 'INTEGRITY_CHECK_RESPONSE',
-        payload: INTEGRITY_CHECKSUM,
+        payload: {
+          packageVersion: PACKAGE_VERSION,
+          checksum: INTEGRITY_CHECKSUM,
+        },
       })
       break
     }
@@ -202,13 +206,6 @@ async function getResponse(event, client, requestId) {
     return passthrough()
   }
 
-  // Bypass requests with the explicit bypass header.
-  // Such requests can be issued by "ctx.fetch()".
-  const mswIntention = request.headers.get('x-msw-intention')
-  if (['bypass', 'passthrough'].includes(mswIntention)) {
-    return passthrough()
-  }
-
   // Notify the client that a request has been intercepted.
   const requestBuffer = await request.arrayBuffer()
   const clientMessage = await sendToClient(
@@ -240,7 +237,7 @@ async function getResponse(event, client, requestId) {
       return respondWithMock(clientMessage.data)
     }
 
-    case 'MOCK_NOT_FOUND': {
+    case 'PASSTHROUGH': {
       return passthrough()
     }
   }