Add --analyze flag to enable bundle analyzer to CLI

Mrtenz · Mrtenz · commit ec7a3b653e60 · 2025-02-07T21:38:27.000+01:00
diff --git a/packages/snaps-cli/package.json b/packages/snaps-cli/package.json
@@ -112,6 +112,7 @@
     "util": "^0.12.5",
     "vm-browserify": "^1.1.2",
     "webpack": "^5.88.0",
+    "webpack-bundle-analyzer": "^4.10.2",
     "webpack-merge": "^5.9.0",
     "yargs": "^17.7.1"
   },
@@ -128,6 +129,7 @@
     "@types/jest": "^27.5.1",
     "@types/node": "18.14.2",
     "@types/serve-handler": "^6.1.0",
+    "@types/webpack-bundle-analyzer": "^4.7.0",
     "@types/yargs": "^17.0.24",
     "@typescript-eslint/eslint-plugin": "^5.42.1",
     "@typescript-eslint/parser": "^6.21.0",
diff --git a/packages/snaps-cli/src/builders.ts b/packages/snaps-cli/src/builders.ts
@@ -6,8 +6,12 @@ export enum TranspilationModes {
   None = 'none',
 }
 
-const builders: Record<string, Readonly<Options>> = {
-  // eslint-disable-next-line @typescript-eslint/naming-convention
+const builders = {
+  analyze: {
+    describe: 'Analyze the Snap bundle',
+    type: 'boolean',
+  },
+
   config: {
     alias: 'c',
     describe: 'Path to config file',
@@ -146,6 +150,6 @@ const builders: Record<string, Readonly<Options>> = {
     type: 'boolean',
     deprecated: true,
   },
-};
+} as const satisfies Record<string, Readonly<Options>>;
 
 export default builders;
diff --git a/packages/snaps-cli/src/commands/build/build.test.ts b/packages/snaps-cli/src/commands/build/build.test.ts
@@ -27,6 +27,7 @@ describe('buildHandler', () => {
 
     expect(process.exitCode).not.toBe(1);
     expect(build).toHaveBeenCalledWith(config, {
+      analyze: false,
       evaluate: false,
       spinner: expect.any(Object),
     });
diff --git a/packages/snaps-cli/src/commands/build/build.ts b/packages/snaps-cli/src/commands/build/build.ts
@@ -9,6 +9,7 @@ import { evaluate } from '../eval';
 import { build } from './implementation';
 
 type BuildContext = {
+  analyze: boolean;
   config: ProcessedWebpackConfig;
 };
 
@@ -27,10 +28,10 @@ const steps: Steps<BuildContext> = [
   },
   {
     name: 'Building the snap bundle.',
-    task: async ({ config, spinner }) => {
+    task: async ({ analyze, config, spinner }) => {
       // We don't evaluate the bundle here, because it's done in a separate
       // step.
-      return await build(config, { evaluate: false, spinner });
+      return await build(config, { analyze, evaluate: false, spinner });
     },
   },
   {
@@ -57,10 +58,15 @@ const steps: Steps<BuildContext> = [
  * This creates the destination directory if it doesn't exist.
  *
  * @param config - The config object.
+ * @param analyze - Whether to analyze the bundle.
  * @returns Nothing.
  */
-export async function buildHandler(config: ProcessedConfig): Promise<void> {
+export async function buildHandler(
+  config: ProcessedConfig,
+  analyze = false,
+): Promise<void> {
   return await executeSteps(steps, {
     config,
+    analyze,
   });
 }
diff --git a/packages/snaps-cli/src/commands/build/index.test.ts b/packages/snaps-cli/src/commands/build/index.test.ts
@@ -10,8 +10,8 @@ describe('build command', () => {
     const config = getMockConfig('webpack');
 
     // @ts-expect-error - Partial `YargsArgs` is fine for testing.
-    await command.handler({ context: { config } });
+    await command.handler({ analyze: false, context: { config } });
 
-    expect(buildHandler).toHaveBeenCalledWith(config);
+    expect(buildHandler).toHaveBeenCalledWith(config, false);
   });
 });
diff --git a/packages/snaps-cli/src/commands/build/index.ts b/packages/snaps-cli/src/commands/build/index.ts
@@ -9,6 +9,7 @@ const command = {
   desc: 'Build snap from source',
   builder: (yarg: yargs.Argv) => {
     yarg
+      .option('analyze', builders.analyze)
       .option('dist', builders.dist)
       .option('eval', builders.eval)
       .option('manifest', builders.manifest)
@@ -22,7 +23,8 @@ const command = {
       .implies('writeManifest', 'manifest')
       .implies('depsToTranspile', 'transpilationMode');
   },
-  handler: async (argv: YargsArgs) => buildHandler(argv.context.config),
+  handler: async (argv: YargsArgs) =>
+    buildHandler(argv.context.config, argv.analyze),
 };
 
 export * from './implementation';
diff --git a/packages/snaps-cli/src/types/yargs.d.ts b/packages/snaps-cli/src/types/yargs.d.ts
@@ -20,6 +20,7 @@ type YargsArgs = {
     config: ProcessedConfig;
   };
 
+  analyze?: boolean;
   fix?: boolean;
   input?: string;
 
diff --git a/packages/snaps-cli/src/webpack/__snapshots__/config.test.ts.snap b/packages/snaps-cli/src/webpack/__snapshots__/config.test.ts.snap
@@ -3440,3 +3440,202 @@ exports[`getDefaultConfiguration returns the default Webpack configuration for t
   "target": "browserslist:/foo/bar/.browserslistrc",
 }
 `;
+
+exports[`getDefaultConfiguration returns the default Webpack configuration when \`analyze\` is \`true\` 1`] = `
+{
+  "devtool": false,
+  "entry": "/foo/bar/src/index.js",
+  "infrastructureLogging": {
+    "level": "none",
+  },
+  "mode": "production",
+  "module": {
+    "rules": [
+      {
+        "exclude": /node_modules/u,
+        "test": /\\\\\\.\\(js\\|jsx\\|mjs\\|cjs\\|ts\\|tsx\\)\\$/u,
+        "use": {
+          "loader": "/foo/bar/node_modules/swc-loader/index.js",
+          "options": {
+            "env": {
+              "targets": "chrome >= 90, firefox >= 91",
+            },
+            "jsc": {
+              "parser": {
+                "syntax": "typescript",
+                "tsx": true,
+              },
+              "transform": {
+                "react": {
+                  "importSource": "@metamask/snaps-sdk",
+                  "runtime": "automatic",
+                  "useBuiltins": true,
+                },
+              },
+            },
+            "module": {
+              "type": "es6",
+            },
+            "sourceMaps": false,
+            "sync": false,
+          },
+        },
+      },
+      {
+        "resolve": {
+          "fullySpecified": false,
+        },
+        "test": /\\\\\\.m\\?js\\$/u,
+      },
+      {
+        "test": /\\\\\\.svg\\$/u,
+        "type": "asset/source",
+      },
+      {
+        "generator": {
+          "dataUrl": [Function],
+        },
+        "test": /\\\\\\.png\\$/u,
+        "type": "asset/inline",
+      },
+      {
+        "generator": {
+          "dataUrl": [Function],
+        },
+        "test": /\\\\\\.jpe\\?g\\$/u,
+        "type": "asset/inline",
+      },
+      false,
+    ],
+  },
+  "optimization": {
+    "minimize": true,
+    "minimizer": [
+      TerserPlugin {
+        "options": {
+          "exclude": undefined,
+          "extractComments": true,
+          "include": undefined,
+          "minimizer": {
+            "implementation": [Function],
+            "options": {},
+          },
+          "parallel": true,
+          "test": /\\\\\\.\\[cm\\]\\?js\\(\\\\\\?\\.\\*\\)\\?\\$/i,
+        },
+      },
+    ],
+    "nodeEnv": false,
+  },
+  "output": {
+    "chunkFormat": "commonjs",
+    "clean": false,
+    "filename": "bundle.js",
+    "library": {
+      "name": "module.exports",
+      "type": "assign",
+    },
+    "path": "/foo/bar/dist",
+    "publicPath": "/",
+  },
+  "performance": {
+    "hints": false,
+  },
+  "plugins": [
+    BundleAnalyzerPlugin {
+      "logger": Logger {
+        "activeLevels": Set {
+          "info",
+          "warn",
+          "error",
+          "silent",
+        },
+      },
+      "opts": {
+        "analyzerHost": "127.0.0.1",
+        "analyzerMode": "server",
+        "analyzerPort": 8888,
+        "analyzerUrl": [Function],
+        "defaultSizes": "parsed",
+        "excludeAssets": null,
+        "generateStatsFile": false,
+        "logLevel": "info",
+        "openAnalyzer": true,
+        "reportFilename": null,
+        "reportTitle": [Function],
+        "startAnalyzer": true,
+        "statsFilename": "stats.json",
+        "statsOptions": null,
+      },
+      "server": null,
+    },
+    SnapsWebpackPlugin {
+      "options": {
+        "eval": undefined,
+        "manifestPath": "/foo/bar/snap.manifest.json",
+        "writeManifest": true,
+      },
+    },
+    SnapsStatsPlugin {
+      "options": {
+        "verbose": false,
+      },
+    },
+    DefinePlugin {
+      "definitions": {
+        "process.env.DEBUG": ""false"",
+        "process.env.NODE_DEBUG": ""false"",
+        "process.env.NODE_ENV": ""production"",
+      },
+    },
+    ProgressPlugin {
+      "dependenciesCount": 10000,
+      "handler": [Function],
+      "modulesCount": 5000,
+      "percentBy": undefined,
+      "profile": false,
+      "showActiveModules": false,
+      "showDependencies": true,
+      "showEntries": true,
+      "showModules": true,
+    },
+    SnapsBundleWarningsPlugin {
+      "options": {
+        "buffer": true,
+        "builtInResolver": SnapsBuiltInResolver {
+          "options": {
+            "ignore": [],
+          },
+          "unresolvedModules": Set {},
+        },
+        "builtIns": true,
+      },
+    },
+  ],
+  "resolve": {
+    "extensions": [
+      ".js",
+      ".jsx",
+      ".mjs",
+      ".cjs",
+      ".ts",
+      ".tsx",
+    ],
+    "fallback": {
+      "buffer": false,
+      "fs": false,
+      "path": false,
+    },
+    "plugins": [
+      SnapsBuiltInResolver {
+        "options": {
+          "ignore": [],
+        },
+        "unresolvedModules": Set {},
+      },
+    ],
+  },
+  "stats": "none",
+  "target": "browserslist:/foo/bar/.browserslistrc",
+}
+`;
diff --git a/packages/snaps-cli/src/webpack/config.test.ts b/packages/snaps-cli/src/webpack/config.test.ts
@@ -200,6 +200,25 @@ describe('getDefaultConfiguration', () => {
     },
   );
 
+  it('returns the default Webpack configuration when `analyze` is `true`', async () => {
+    const config = getMockConfig('webpack', {
+      input: 'src/index.js',
+      output: {
+        path: 'dist',
+      },
+      manifest: {
+        path: 'snap.manifest.json',
+      },
+    });
+
+    jest.spyOn(process, 'cwd').mockReturnValue('/foo/bar');
+
+    const output = await getDefaultConfiguration(config, { analyze: true });
+
+    // eslint-disable-next-line jest/no-restricted-matchers
+    expect(normalizeConfig(output)).toMatchSnapshot();
+  });
+
   it.each([
     getMockConfig('browserify', {
       cliOptions: {
diff --git a/packages/snaps-cli/src/webpack/config.ts b/packages/snaps-cli/src/webpack/config.ts
@@ -3,8 +3,9 @@ import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import type { Ora } from 'ora';
 import { resolve } from 'path';
 import TerserPlugin from 'terser-webpack-plugin';
-import type { Configuration } from 'webpack';
+import type { Configuration, WebpackPluginInstance } from 'webpack';
 import { DefinePlugin, ProgressPlugin, ProvidePlugin } from 'webpack';
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 
 import type { ProcessedWebpackConfig } from '../config';
 import { getFunctionLoader, wasm } from './loaders';
@@ -25,6 +26,11 @@ import {
 } from './utils';
 
 export type WebpackOptions = {
+  /**
+   * Whether to analyze the bundle.
+   */
+  analyze?: boolean;
+
   /**
    * Whether to watch for changes.
    */
@@ -282,6 +288,9 @@ export async function getDefaultConfiguration(
      * @see https://webpack.js.org/configuration/plugins/
      */
     plugins: [
+      options.analyze &&
+        (new BundleAnalyzerPlugin() as unknown as WebpackPluginInstance),
+
       /**
        * The `ForkTsCheckerWebpackPlugin` is a Webpack plugin that checks
        * Typescript type definitions, it does this in a separate process for speed.
diff --git a/yarn.lock b/yarn.lock
