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.

Author: gribnoysup

packages/compass-web/webpack.config.js

@@ -15,6 +15,64 @@ 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. This custom code splitting is way less advanced, but
+ * works well for leaf node dependencies of the package.
+ *
+ * NB: This naive implementation works well only for leaf dependencies with a
+ * single export file. It can be updated to support multiple exports packages,
+ * but we can skip this for now
+ */
+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 +280,7 @@ module.exports = (env, args) => {
     },
   };
 
-  return merge(config, {
+  const compassWebConfig = merge(config, {
     externals: {
       react: 'commonjs2 react',
       'react-dom': 'commonjs2 react-dom',
@@ -258,4 +316,18 @@ 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',
+    '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;
 };