test(bundlers): add e2e test for bundler tree-shaking (#7245)

Author: kuhe

Makefile

@@ -46,6 +46,10 @@ test-endpoints:
 test-e2e: bundles
 	yarn g:vitest run -c vitest.config.e2e.ts --retry=4
 	yarn g:vitest run -c vitest.config.browser.e2e.ts --retry=4
+	make test-bundlers
+
+test-bundlers:
+	(cd ./tests/bundlers && make build test)
 
 build-s3-browser-bundle:
 	node ./clients/client-s3/test/browser-build/esbuild

package.json

@@ -111,8 +111,9 @@
     "turbo": "2.5.3",
     "typescript": "~5.8.3",
     "verdaccio": "5.25.0",
+    "vite": "7.0.6",
     "vitest": "2.1.9",
-    "webpack": "5.76.0",
+    "webpack": "5.101.0",
     "webpack-cli": "4.10.0",
     "yargs": "17.5.1"
   },

tests/bundlers/Makefile

@@ -0,0 +1,15 @@
+.PHONY: test build vite webpack
+
+# asserts that bundles contain expected content.
+test:
+	node test.spec.mjs
+
+# create bundles
+build:
+	make vite webpack
+
+vite:
+	npx vite build
+
+webpack:
+	npx webpack

tests/bundlers/package.json

@@ -0,0 +1,4 @@
+{
+  "dependencies": {},
+  "type": "module"
+}

tests/bundlers/source.ts

@@ -0,0 +1,3 @@
+import { GetObjectCommand, S3Client } from "@aws-sdk/client-s3";
+
+export { GetObjectCommand, S3Client };

tests/bundlers/test.spec.mjs

@@ -0,0 +1,45 @@
+import assert from "node:assert";
+
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const webpackDist = {
+  name: "webpack",
+  content: fs.readFileSync(path.join(__dirname, "dist", "webpack-dist.js"), "utf-8"),
+};
+const viteDist = {
+  name: "vite",
+  content: fs.readFileSync(path.join(__dirname, "dist", "vite-dist.js"), "utf-8"),
+};
+
+for (const { content: fileContents, name } of [webpackDist, viteDist]) {
+  console.log(name);
+
+  const contentSize = fileContents.replaceAll(/\s+/g, "").length;
+  const callsToClassBuilder = fileContents.match(/\.classBuilder\(\)/g);
+  const runtimeConfig = fileContents.match(/runtime: "browser"/);
+
+  try {
+    assert(contentSize < 1_000_000);
+    console.info(`✅ content size is under 1M char.`);
+  } catch (e) {
+    throw new Error("Content size should be less than 1M characters.");
+  }
+
+  try {
+    assert(callsToClassBuilder.length <= 2); // only GetObject and CreateSession should be present.
+    console.info(`✅ two commands bundled (tree shaken).`);
+  } catch (e) {
+    throw new Error("there should only be 2 calls to the Command classBuilder. Tree-shaking failure?");
+  }
+
+  try {
+    assert(runtimeConfig.length > 0); // browser runtimeConfig should be loaded.
+    console.info(`✅ runtimeConfig is browser.`);
+  } catch (e) {
+    throw new Error("the browser runtimeConfig should be present in the bundle.");
+  }
+}

tests/bundlers/vite.config.ts

@@ -0,0 +1,27 @@
+import { defineConfig } from "vite";
+import * as path from "node:path";
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: path.join(__dirname, "source.ts"),
+      name: "dist",
+      // the proper extensions will be added
+      fileName: "vite-dist",
+    },
+    rollupOptions: {
+      // make sure to externalize deps that shouldn't be bundled
+      // into your library
+      external: [],
+      output: {
+        // Provide global variables to use in the UMD build
+        // for externalized deps
+        globals: {},
+      },
+    },
+    minify: false,
+    terserOptions: {
+      mangle: false,
+    },
+  },
+});

tests/bundlers/webpack.config.js

@@ -0,0 +1,17 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default {
+  mode: "production",
+  entry: "./source.ts",
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    filename: "webpack-dist.js",
+    library: "dist",
+  },
+  optimization: {
+    minimize: false,
+  },
+};