chore(web): manually split bundle into multiple chunks (#6985)

* chore(web): we have chunk splitting at home

It's really hard to make webpack to bundle both for target web
and use require imports for its internal module system, to work
around that we add this manual chunk splitting logic for the
production build.

* chore(web): add todo

Author: gribnoysup

packages/compass-web/webpack.config.js

@@ -15,6 +15,68 @@ function localPolyfill(name) {
   return path.resolve(__dirname, 'polyfills', ...name.split('/'), 'index.ts');
 }
 
+function normalizeDepName(name) {
+  return name.replaceAll('@', '').replaceAll('/', '__');
+}
+
+function resolveDepEntry(name) {
+  const monorepoPackagesDir = path.resolve(__dirname, '..');
+  const resolvedPath = require.resolve(name);
+  if (resolvedPath.startsWith(monorepoPackagesDir)) {
+    const packageJson = require(`${name}/package.json`);
+    const packageRoot = path.dirname(require.resolve(`${name}/package.json`));
+    const entrypoint = path.join(
+      packageRoot,
+      packageJson['compass:main'] ?? packageJson['main']
+    );
+    return entrypoint;
+  }
+  return require.resolve(name);
+}
+
+/**
+ * Takes in a webpack configuration for a library package and creates a
+ * multi-compiler config that splits the library into multiple parts that can be
+ * properly processed by another webpack compilation.
+ *
+ * This is opposed to using a webpack chunk splitting feature that will generate
+ * the code that uses internal webpack module runtime that will not be handled
+ * by any other bundler (see TODO). This custom code splitting is way less
+ * advanced, but works well for leaf node dependencies of the package.
+ *
+ * TODO(COMPASS-9445): This naive implementation works well only for leaf
+ * dependencies with a single export file. A better approach would be to coerce
+ * webpack to produce a require-able web bundle, which in theory should be
+ * possible with a combination of `splitChunks`, `chunkFormat: 'commonjs'`, and
+ * `target: 'web'`, but in practice produced bundle doesn't work due to webpack
+ * runtime exports not being built correctly. We should investigate and try to
+ * fix this to remove this custom chunk splitting logic.
+ */
+function createSiblingBundleFromLeafDeps(
+  config,
+  deps,
+  moduleType = 'commonjs2'
+) {
+  const siblings = Object.fromEntries(
+    deps.map((depName) => {
+      return [depName, `${moduleType} ./${normalizeDepName(depName)}.js`];
+    })
+  );
+  const baseConfig = merge(config, { externals: siblings });
+  const configs = [baseConfig].concat(
+    deps.map((depName) => {
+      return merge(baseConfig, {
+        entry: resolveDepEntry(depName),
+        output: {
+          filename: `${normalizeDepName(depName)}.js`,
+          library: { type: moduleType },
+        },
+      });
+    })
+  );
+  return configs;
+}
+
 /**
  * Atlas Cloud uses in-flight compression that doesn't compress anything that is
  * bigger than 10MB, we want to make sure that compass-web assets stay under the
@@ -222,7 +284,7 @@ module.exports = (env, args) => {
     },
   };
 
-  return merge(config, {
+  const compassWebConfig = merge(config, {
     externals: {
       react: 'commonjs2 react',
       'react-dom': 'commonjs2 react-dom',
@@ -258,4 +320,19 @@ module.exports = (env, args) => {
       },
     ],
   });
+
+  // Split production bundle into more chunks to make sure it's easier for us to
+  // stay under the max chunk limit. Be careful when adding new packages here,
+  // make sure you're only selecting big packages with the smallest amount of
+  // shared dependencies possible
+  const bundles = createSiblingBundleFromLeafDeps(compassWebConfig, [
+    '@mongodb-js/compass-components',
+    'ag-grid-community',
+    'bson-transpilers',
+    // bson is not that big, but is a shared dependency of compass-web,
+    // compass-components and bson-transpilers, so splitting it out
+    'bson',
+  ]);
+
+  return bundles;
 };