feat: reduce sourcemaps and visualize dep tree

.gitignore

@@ -7,4 +7,4 @@ node_modules
 .idea
 dist/
 .serverless/
-
+.esbuild-visualizer

cdk/lib/lambda-stack.ts

@@ -18,7 +18,10 @@ export class LambdaStack extends cdk.Stack {
           )
       ),
       runtime: lambda.Runtime.NODEJS_18_X,
-      functionName: 'users-cdk-boilerplate'
+      functionName: 'users-cdk-boilerplate',
+      environment: {
+        NODE_OPTIONS: '--enable-source-maps',
+      }
     });
 
     const productsLambda = new lambda.Function(this, 'products-lambda', {
@@ -32,7 +35,10 @@ export class LambdaStack extends cdk.Stack {
           )
       ),
       runtime: lambda.Runtime.NODEJS_18_X,
-      functionName: 'products-cdk-boilerplate'
+      functionName: 'products-cdk-boilerplate',
+      environment: {
+        NODE_OPTIONS: '--enable-source-maps',
+      }
     });
   }
 }

cdk/package.json

@@ -9,6 +9,7 @@
     "watch": "tsc -w",
     "test": "jest",
     "cdk": "cdk",
+    "diff": "cdk diff",
     "deploy": "cdk deploy"
   },
   "devDependencies": {

esbuild.ts

@@ -1,6 +1,8 @@
 import * as fs from 'fs';
 import * as path from 'path';
-import {build} from 'esbuild';
+import {build, Plugin} from 'esbuild';
+import {visualizer, TemplateType} from "esbuild-visualizer";
+import * as open from "open";
 
 const functionsDir = 'src';
 const outDir = 'dist';
@@ -9,16 +11,90 @@ const entryPoints = fs
   .filter(entry => entry !== 'common')
   .map(entry => `${functionsDir}/${entry}/handler.ts`);
 
-build({
-  entryPoints,
-  bundle: true,
-  outdir: path.join(__dirname, outDir),
-  outbase: functionsDir,
-  platform: 'node',
-  sourcemap: 'external',
-  write: true,
-  tsconfig: './tsconfig.json',
-  minify: true,
-  keepNames: false,
+
+export type EsbuildFunctionBundlerOptions = {
+  /**
+   * Defaults to cdk.out/esbuild-visualizer
+   */
+  outputDir?: string,
+
+  /**
+   * Defaults to "treemap"
+   */
+  template?: TemplateType,
+
+  /**
+   * Open the HTML file after bundling
+   */
+  open?: boolean
+}
+
+function esBuildPluginShrinkSourceMap(): Plugin
+{
+  //https://github.com/evanw/esbuild/issues/1685#issuecomment-944916409
+  return {
+    name: 'excludeVendorFromSourceMap',
+    setup(build) {
+      build.onLoad({ filter: /node_modules/ }, args => {
+        if (args.path.endsWith('.js') && !args.path.endsWith('.json'))
+          return {
+            contents: fs.readFileSync(args.path, 'utf8')
+              + '\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIiJdLCJtYXBwaW5ncyI6IkEifQ==',
+            loader: 'default',
+          }
+        else
+          return
+      })
+    },
+  }
+}
+
+(async () => {
+  for (const entryPoint of entryPoints)
+  {
+    const resp = await build({
+      entryPoints: [entryPoint],
+      bundle: true,
+      outdir: path.join(__dirname, outDir),
+      outbase: functionsDir,
+      platform: 'node',
+      sourcemap: 'external',
+      write: true,
+      tsconfig: './tsconfig.json',
+      minify: true,
+      keepNames: false,
+      plugins: [
+        esBuildPluginShrinkSourceMap(),
+      ],
+      metafile: true,
+    });
+
+    const bundlerDefaults: EsbuildFunctionBundlerOptions = {
+      outputDir: ".esbuild-visualizer",
+      template: "treemap"
+    };
+
+    /* Analyze Bundle */
+    // fs.writeFileSync('meta.json', JSON.stringify(result.metafile));
+    // let text = await esbuild.analyzeMetafile(result.metafile, {verbose: true, color: true});
+    // console.log(text);
+    const htmlContent = await visualizer(resp.metafile, {
+      title: entryPoint,
+      template: bundlerDefaults.template!,
+    });
+
+
+    const outputFile = path.join(__dirname, bundlerDefaults.outputDir!, entryPoint + ".html")
+    const outputDir = path.dirname(outputFile)
+    if(!fs.existsSync(outputDir))
+      fs.mkdirSync(outputDir, {recursive: true});
+
+    fs.writeFileSync(outputFile, htmlContent, {});
+
+    await open(outputFile);
+  }
+})().catch(e => {
+  console.error(e);
   // eslint-disable-next-line no-process-exit
-}).catch(() => process.exit(1));
+  process.exit(1);
+});

package.json

@@ -7,6 +7,7 @@
     "prebuild": "rm -rf dist",
     "build": "tsc --outDir dist && rm -rf dist && ts-node esbuild.ts",
     "postbuild": "ts-node postbuild.ts",
+    "cdk-diff": "npm run build && pushd cdk && npm i && npm run diff && popd",
     "cdk-deploy": "npm run build && pushd cdk && npm i && npm run deploy && popd",
     "serverless-deploy": "npm run build && serverless deploy"
   },
@@ -17,13 +18,15 @@
     "@types/aws-lambda": "^8.10.125",
     "@types/lambda-log": "^3.0.2",
     "esbuild": "^0.19.5",
+    "esbuild-visualizer": "^0.4.1",
     "serverless": "^3.36.0",
     "serverless-better-credentials": "^2.0.0",
     "ts-node": "^10.9.1",
     "typescript": "^5.2.2"
   },
   "dependencies": {
     "aws-lambda": "^1.0.7",
-    "lambda-log": "^3.1.0"
+    "lambda-log": "^3.1.0",
+    "open": "^8.4.2"
   }
 }

postbuild.ts

@@ -10,7 +10,7 @@ fs.readdirSync(path.join(__dirname, functionsDir))
       'ls -lah',
       `pushd dist/${entry}`,
       `echo "zipping ${entry} lambda"`,
-      `zip -R ${entry}.zip *.js`,
+      `zip -R ${entry}.zip *.js *.map`,
       'popd',
     ];
     execSync(commands.join(' && '), {