chore: Add bundle analysis package (#11379)

With the v8 beta coming up, we should start examining the bundle to see
if there's any opportunity for us to optimize.

This PR adds a package that you can add simple scenarios to that can get
tested against.

Author: AbhiPrasad

.eslintrc.js

@@ -51,7 +51,7 @@ module.exports = {
       },
     },
     {
-      files: ['scenarios/**', 'dev-packages/rollup-utils/**'],
+      files: ['scenarios/**', 'dev-packages/rollup-utils/**', 'dev-packages/bundle-analyzer-scenarios/**'],
       parserOptions: {
         sourceType: 'module',
       },

dev-packages/bundle-analyzer-scenarios/README.md

@@ -0,0 +1,15 @@
+# Bundle Analyzer Scenarios
+
+This repository contains a set of scenarios to check the SDK against webpack bundle analyzer.
+
+You can run the scenarios by running `yarn analyze` and selecting the scenario you want to run.
+
+If you want to have more granular analysis of modules, you can build the SDK packages with with `preserveModules` set to
+`true`. You can do this via the `SENTRY_BUILD_PRESERVE_MODULES`.
+
+```bash
+SENTRY_BUILD_PRESERVE_MODULES=true yarn build
+```
+
+Please note that `preserveModules` has different behaviour with regards to tree-shaking, so you will get different total
+bundle size results.

dev-packages/bundle-analyzer-scenarios/browser-basic/index.js

@@ -0,0 +1,5 @@
+import { init } from '@sentry/browser';
+
+init({
+  dsn: 'https://[email protected]/0000000',
+});

dev-packages/bundle-analyzer-scenarios/browser-basic/package.json

@@ -0,0 +1,4 @@
+{
+  "type": "module",
+  "main": "index.js"
+}

dev-packages/bundle-analyzer-scenarios/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@sentry-internal/bundle-analyzer-scenarios",
+  "version": "8.0.0-alpha.7",
+  "description": "Scenarios to test bundle analysis with",
+  "repository": "git://github.com/getsentry/sentry-javascript.git",
+  "homepage": "https://github.com/getsentry/sentry-javascript/tree/master/dev-packages/bundle-analyzer-scenarios",
+  "author": "Sentry",
+  "license": "MIT",
+  "private": true,
+  "dependencies": {
+    "html-webpack-plugin": "^5.5.0",
+    "webpack": "^5.76.0",
+    "webpack-bundle-analyzer": "^4.5.0",
+    "inquirer": "^8.2.0"
+  },
+  "scripts": {
+    "analyze": "node webpack.cjs"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  },
+  "type": "module"
+}

dev-packages/bundle-analyzer-scenarios/webpack.cjs

@@ -0,0 +1,83 @@
+const path = require('path');
+const { promises } = require('fs');
+
+const inquirer = require('inquirer');
+const webpack = require('webpack');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+async function init() {
+  const scenarios = await getScenariosFromDirectories();
+
+  const answers = await inquirer.prompt([
+    {
+      type: 'rawlist',
+      name: 'scenario',
+      message: 'Which scenario you want to run?',
+      choices: scenarios,
+      pageSize: scenarios.length,
+      loop: false,
+    },
+  ]);
+
+  console.log(`Bundling scenario: ${answers.scenario}`);
+
+  await runWebpack(answers.scenario);
+}
+
+async function runWebpack(scenario) {
+  const alias = await generateAlias();
+
+  webpack(
+    {
+      mode: 'production',
+      entry: path.resolve(__dirname, scenario),
+      output: {
+        filename: 'main.js',
+        path: path.resolve(__dirname, 'dist', scenario),
+      },
+      plugins: [new BundleAnalyzerPlugin({ analyzerMode: 'static' }), new HtmlWebpackPlugin()],
+      resolve: {
+        alias,
+      },
+    },
+    (err, stats) => {
+      if (err || stats.hasErrors()) {
+        console.log(err);
+      }
+
+      // console.log('DONE', stats);
+    },
+  );
+}
+
+const PACKAGE_PATH = '../../packages';
+
+/**
+ * Generate webpack aliases based on packages in monorepo
+ * Example of an alias: '@sentry/serverless': 'path/to/sentry-javascript/packages/serverless',
+ */
+async function generateAlias() {
+  const dirents = await promises.readdir(PACKAGE_PATH);
+
+  return Object.fromEntries(
+    await Promise.all(
+      dirents.map(async d => {
+        const packageJSON = JSON.parse(await promises.readFile(path.resolve(PACKAGE_PATH, d, 'package.json')));
+        return [packageJSON['name'], path.resolve(PACKAGE_PATH, d)];
+      }),
+    ),
+  );
+}
+
+/**
+ * Generates an array of available scenarios
+ */
+async function getScenariosFromDirectories() {
+  const exclude = ['node_modules', 'dist', '~', 'package.json', 'yarn.lock', 'README.md', '.DS_Store', 'webpack.cjs'];
+
+  const dirents = await promises.readdir(path.join(__dirname), { withFileTypes: true });
+  return dirents.map(dirent => dirent.name).filter(mape => !exclude.includes(mape));
+}
+
+init();

dev-packages/rollup-utils/npmHelpers.mjs

@@ -10,7 +10,6 @@ import deepMerge from 'deepmerge';
 
 import {
   makeCleanupPlugin,
-  makeCodeCovPlugin,
   makeDebugBuildStatementReplacePlugin,
   makeExtractPolyfillsPlugin,
   makeNodeResolvePlugin,
@@ -44,8 +43,6 @@ export function makeBaseNPMConfig(options = {}) {
     excludeIframe: undefined,
   });
 
-  const codecovPlugin = makeCodeCovPlugin();
-
   const defaultBaseConfig = {
     input: entrypoints,
 
@@ -106,7 +103,6 @@ export function makeBaseNPMConfig(options = {}) {
       debugBuildStatementReplacePlugin,
       rrwebBuildPlugin,
       cleanupPlugin,
-      codecovPlugin,
     ],
 
     // don't include imported modules from outside the package in the final output

package.json

@@ -77,6 +77,7 @@
     "packages/vue",
     "packages/wasm",
     "dev-packages/browser-integration-tests",
+    "dev-packages/bundle-analyzer-scenarios",
     "dev-packages/e2e-tests",
     "dev-packages/node-integration-tests",
     "dev-packages/overhead-metrics",

packages/browser/rollup.npm.config.mjs

@@ -9,7 +9,10 @@ export default makeNPMConfigVariants(
         // set exports to 'named' or 'auto' so that rollup doesn't warn
         exports: 'named',
         // set preserveModules to false because we want to bundle everything into one file.
-        preserveModules: false,
+        preserveModules:
+          process.env.SENTRY_BUILD_PRESERVE_MODULES === undefined
+            ? false
+            : Boolean(process.env.SENTRY_BUILD_PRESERVE_MODULES),
       },
     },
   }),

packages/core/rollup.npm.config.mjs

@@ -7,7 +7,10 @@ export default makeNPMConfigVariants(
         // set exports to 'named' or 'auto' so that rollup doesn't warn
         exports: 'named',
         // set preserveModules to false because we want to bundle everything into one file.
-        preserveModules: false,
+        preserveModules:
+          process.env.SENTRY_BUILD_PRESERVE_MODULES === undefined
+            ? false
+            : Boolean(process.env.SENTRY_BUILD_PRESERVE_MODULES),
       },
     },
   }),

packages/deno/rollup.test.config.mjs

@@ -10,7 +10,10 @@ export default [
     output: {
       file: 'build-test/index.js',
       sourcemap: true,
-      preserveModules: false,
+      preserveModules:
+        process.env.SENTRY_BUILD_PRESERVE_MODULES === undefined
+          ? false
+          : Boolean(process.env.SENTRY_BUILD_PRESERVE_MODULES),
       strict: false,
       freeze: false,
       interop: 'auto',

packages/feedback/rollup.npm.config.mjs

@@ -9,7 +9,10 @@ export default makeNPMConfigVariants(
         exports: 'named',
         // set preserveModules to false because for feedback we actually want
         // to bundle everything into one file.
-        preserveModules: false,
+        preserveModules:
+          process.env.SENTRY_BUILD_PRESERVE_MODULES === undefined
+            ? false
+            : Boolean(process.env.SENTRY_BUILD_PRESERVE_MODULES),
       },
     },
     sucrase: {

packages/node/rollup.npm.config.mjs

@@ -14,7 +14,10 @@ export default [
           // set exports to 'named' or 'auto' so that rollup doesn't warn
           exports: 'named',
           // set preserveModules to false because we want to bundle everything into one file.
-          preserveModules: false,
+          preserveModules:
+            process.env.SENTRY_BUILD_PRESERVE_MODULES === undefined
+              ? false
+              : Boolean(process.env.SENTRY_BUILD_PRESERVE_MODULES),
         },
         plugins: [
           replace({

packages/opentelemetry/rollup.npm.config.mjs

@@ -7,7 +7,10 @@ export default makeNPMConfigVariants(
         // set exports to 'named' or 'auto' so that rollup doesn't warn
         exports: 'named',
         // set preserveModules to false because we want to bundle everything into one file.
-        preserveModules: false,
+        preserveModules:
+          process.env.SENTRY_BUILD_PRESERVE_MODULES === undefined
+            ? false
+            : Boolean(process.env.SENTRY_BUILD_PRESERVE_MODULES),
       },
     },
   }),

packages/replay-canvas/rollup.npm.config.mjs

@@ -9,7 +9,10 @@ export default makeNPMConfigVariants(
         exports: 'named',
         // set preserveModules to false because for Replay we actually want
         // to bundle everything into one file.
-        preserveModules: false,
+        preserveModules:
+          process.env.SENTRY_BUILD_PRESERVE_MODULES === undefined
+            ? false
+            : Boolean(process.env.SENTRY_BUILD_PRESERVE_MODULES),
       },
     },
   }),

packages/replay-internal/rollup.npm.config.mjs

@@ -9,7 +9,10 @@ export default makeNPMConfigVariants(
         exports: 'named',
         // set preserveModules to false because for Replay we actually want
         // to bundle everything into one file.
-        preserveModules: false,
+        preserveModules:
+          process.env.SENTRY_BUILD_PRESERVE_MODULES === undefined
+            ? false
+            : Boolean(process.env.SENTRY_BUILD_PRESERVE_MODULES),
       },
     },
   }),

packages/tracing-internal/rollup.npm.config.mjs

@@ -7,7 +7,10 @@ export default makeNPMConfigVariants(
         // set exports to 'named' or 'auto' so that rollup doesn't warn
         exports: 'named',
         // set preserveModules to false because we want to bundle everything into one file.
-        preserveModules: false,
+        preserveModules:
+          process.env.SENTRY_BUILD_PRESERVE_MODULES === undefined
+            ? false
+            : Boolean(process.env.SENTRY_BUILD_PRESERVE_MODULES),
       },
     },
   }),

packages/utils/rollup.npm.config.mjs

@@ -7,7 +7,10 @@ export default makeNPMConfigVariants(
         // set exports to 'named' or 'auto' so that rollup doesn't warn
         exports: 'named',
         // set preserveModules to false because we want to bundle everything into one file.
-        preserveModules: false,
+        preserveModules:
+          process.env.SENTRY_BUILD_PRESERVE_MODULES === undefined
+            ? false
+            : Boolean(process.env.SENTRY_BUILD_PRESERVE_MODULES),
       },
     },
   }),