chore: Better bundling for bb.js, remove aztec.js bundling (#11761)

Improves `bb.js` bundling by providing lazily loaded gzipped wasm
artifacts that get included with the library as plain old .js files via
inlining. This combines the previous "inline all the things in a big
file" approach (with its convenience advantage) with the new lazy
loading approach that reduces load time and bundle sizes.

This has rendered bundling `aztec.js` unnecessary. Also the bundle
wasn't used downstream due to the output `main.js` file not being
exposed anywhere. It should allow external bundlers to tree-shake
efficiently and streamline our build process.


Started aztec.js refactor to try and prune some of the l1 stuff

---------

Co-authored-by: Alex Gherghisan <alexghr@users.noreply.github.com>

barretenberg/acir_tests/browser-test-app/package.json

@@ -6,18 +6,16 @@
   "type": "module",
   "scripts": {
     "build": "rm -rf dest && webpack",
-    "serve:dest:st": "serve -n -L -p ${PORT:-8080} -c ../serve.st.json dest",
-    "serve:dest:mt": "serve -n -L -p ${PORT:-8080} -c ../serve.mt.json dest"
+    "serve:dest:st": "serve -n -L -p ${PORT:-8080} -c ../serve.json dest",
+    "serve:dest:mt": "serve -n -L -p ${PORT:-8080} -c ../serve.json dest"
   },
   "devDependencies": {
     "@aztec/bb.js": "../../ts",
     "@types/debug": "^4.1.12",
     "@types/pako": "^2.0.3",
-    "copy-webpack-plugin": "^12.0.2",
     "debug": "^4.3.4",
     "html-webpack-plugin": "^5.6.0",
     "pako": "^2.1.0",
-    "resolve-typescript-plugin": "^2.0.1",
     "serve": "^14.2.1",
     "ts-loader": "^9.5.1",
     "typescript": "^5.4.2",

barretenberg/acir_tests/browser-test-app/serve.mt.json → barretenberg/acir_tests/browser-test-app/serve.json

@@ -12,17 +12,6 @@
           "value": "same-origin"
         }
       ]
-    },
-    {
-      "source" : "**/*.gz",
-      "headers" : [{
-        "key" : "Content-Encoding",
-        "value" : "gzip"
-      },
-      {
-        "key" : "Content-Type",
-        "value" : "application/wasm"
-      }]
     }
   ]
 }

barretenberg/acir_tests/browser-test-app/webpack.config.js

@@ -1,7 +1,5 @@
 import { resolve, dirname } from "path";
 import { fileURLToPath } from "url";
-import ResolveTypeScriptPlugin from "resolve-typescript-plugin";
-import CopyWebpackPlugin from "copy-webpack-plugin";
 import HtmlWebpackPlugin from "html-webpack-plugin";
 import webpack from "webpack";
 
@@ -13,10 +11,6 @@ export default {
   },
   module: {
     rules: [
-      {
-        test: /\.gz$/,
-        type: 'asset/resource',
-      },
       {
         test: /\.tsx?$/,
         use: [{ loader: "ts-loader" }],
@@ -25,8 +19,8 @@ export default {
   },
   output: {
     path: resolve(dirname(fileURLToPath(import.meta.url)), "./dest"),
+    publicPath: "/",
     filename: "[name].js",
-    chunkFilename: "[name].chunk.js", // This naming pattern is used for chunks produced from code-splitting.
     library: {
       type: 'module',
     },
@@ -36,19 +30,11 @@ export default {
     outputModule: true,
   },
   plugins: [
-    new CopyWebpackPlugin({
-      patterns: [
-        {
-          context: '../../ts/dest/browser',
-          from: '*.gz',
-        },
-      ],
-    }),
     new HtmlWebpackPlugin({ inject: false, template: "./src/index.html" }),
     new webpack.DefinePlugin({ "process.env.NODE_DEBUG": false }),
   ],
   resolve: {
-    plugins: [new ResolveTypeScriptPlugin()],
+    extensions: ['.tsx', '.ts', '.js'],
   },
   devServer: {
     hot: false,

barretenberg/ts/package.json

@@ -84,7 +84,6 @@
     "@typescript-eslint/eslint-plugin": "^5.54.1",
     "@typescript-eslint/parser": "^5.54.1",
     "buffer": "^6.0.3",
-    "copy-webpack-plugin": "^11.0.0",
     "eslint": "^8.35.0",
     "eslint-config-prettier": "^8.8.0",
     "html-webpack-plugin": "^5.5.1",
@@ -93,6 +92,7 @@
     "prettier": "^2.8.4",
     "resolve-typescript-plugin": "^2.0.1",
     "source-map-support": "^0.5.21",
+    "terser-webpack-plugin": "^5.3.11",
     "ts-jest": "^29.1.0",
     "ts-loader": "^9.4.2",
     "ts-node": "^10.9.1",

barretenberg/ts/src/barretenberg_wasm/fetch_code/browser/barretenberg-threads.ts

@@ -0,0 +1,3 @@
+import barretenbergThreadsModule from '../../barretenberg-threads.wasm.gz';
+
+export default barretenbergThreadsModule;

barretenberg/ts/src/barretenberg_wasm/fetch_code/browser/barretenberg.ts

@@ -0,0 +1,3 @@
+import barretenbergModule from '../../barretenberg.wasm.gz';
+
+export default barretenbergModule;

barretenberg/ts/src/barretenberg_wasm/fetch_code/browser/index.ts

@@ -1,12 +1,12 @@
-import barretenbergModule from '../../barretenberg.wasm.gz';
-import barretenbergThreadsModule from '../../barretenberg-threads.wasm.gz';
 import pako from 'pako';
 
 // Annoyingly the wasm declares if it's memory is shared or not. So now we need two wasms if we want to be
 // able to fallback on "non shared memory" situations.
 export async function fetchCode(multithreaded: boolean, wasmPath?: string) {
-  let url = multithreaded ? barretenbergThreadsModule : barretenbergModule;
-  url = wasmPath ? `${wasmPath}/${/[^/]+(?=\/$|$)/.exec(url)?.[0]}` : url;
+  const suffix = multithreaded ? '-threads' : '';
+  const url = wasmPath
+    ? `${wasmPath}/barretenberg${suffix}.wasm.gz`
+    : (await import(/* webpackIgnore: true */ `./barretenberg${suffix}.js`)).default;
   const res = await fetch(url);
   const maybeCompressedData = await res.arrayBuffer();
   const buffer = new Uint8Array(maybeCompressedData);

barretenberg/ts/webpack.config.js

@@ -2,6 +2,7 @@ import { resolve, dirname } from 'path';
 import { fileURLToPath } from 'url';
 import ResolveTypeScriptPlugin from 'resolve-typescript-plugin';
 import webpack from 'webpack';
+import TerserPlugin from 'terser-webpack-plugin';
 
 /**
  * @type {import('webpack').Configuration}
@@ -12,24 +13,17 @@ export default {
   // Useful for debugging.
   // mode: 'development',
   // devtool: 'source-map',
-  entry: './src/index.ts',
+  entry: {
+    index: './src/index.ts',
+    // Force inclusion of inlined wasm files withouth mangling await import statements.
+    barretenberg: './src/barretenberg_wasm/fetch_code/browser/barretenberg.ts',
+    "barretenberg-threads": './src/barretenberg_wasm/fetch_code/browser/barretenberg-threads.ts'
+  },
   module: {
     rules: [
       {
         test: /\.wasm\.gz$/,
-        type: 'asset/resource',
-        generator: {
-          // The wasm filenames are actually the same, but we symlink them to the correct one
-          // (threads or not) on the .ts folder. Unfortunately webpack uses the original name,
-          // so we have to manually correct it here.
-          filename: (path) => {
-            if(path.filename.includes('wasm-threads')) {
-              return 'barretenberg-threads.wasm.gz';
-            }
-            return '[base]';
-          },
-          publicPath: '/'
-        }
+        type: 'asset/inline',
       },
       {
         test: /\.worker\.ts$/,
@@ -49,15 +43,29 @@ export default {
   },
   output: {
     path: resolve(dirname(fileURLToPath(import.meta.url)), './dest/browser'),
-    filename: 'index.js',
+    filename: '[name].js',
+    chunkFilename: '[name].[chunkhash].js',
     module: true,
     globalObject: 'globalThis',
     library: {
       type: 'module',
     },
   },
   optimization: {
-    minimize: false,
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          compress: false,
+          mangle: false,
+          format: {
+            beautify: true
+          }
+        },
+      }),
+    ],
+    splitChunks: {
+      chunks: 'async',
+    }
   },
   experiments: {
     outputModule: true,