Very large bundle sizes in V6?

[smimicha]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Not applicable

Amplify APIs

Authentication, Analytics

Amplify Version

v6

Amplify Categories

analytics

Backend

None

Environment information

# Put output below this line
System:
    OS: macOS 14.4.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 42.57 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.7.1 - /usr/local/opt/node@21/bin/node
    npm: 10.5.0 - /usr/local/opt/node@21/bin/npm
  Browsers:
    Chrome: 125.0.6422.142
    Safari: 17.4.1
  npmPackages:
    @amzn/brazil: ^2.0.6 => 2.0.6 
    @tsconfig/node18: ^18.2.4 => 18.2.4 
    @types/jest: ^29.5.12 => 29.5.12 
    aws-amplify: ^6.3.4 => 6.3.4 
    aws-amplify/adapter-core:  undefined ()
    aws-amplify/analytics:  undefined ()
    aws-amplify/analytics/kinesis:  undefined ()
    aws-amplify/analytics/kinesis-firehose:  undefined ()
    aws-amplify/analytics/personalize:  undefined ()
    aws-amplify/analytics/pinpoint:  undefined ()
    aws-amplify/api:  undefined ()
    aws-amplify/api/server:  undefined ()
    aws-amplify/auth:  undefined ()
    aws-amplify/auth/cognito:  undefined ()
    aws-amplify/auth/cognito/server:  undefined ()
    aws-amplify/auth/enable-oauth-listener:  undefined ()
    aws-amplify/auth/server:  undefined ()
    aws-amplify/data:  undefined ()
    aws-amplify/data/server:  undefined ()
    aws-amplify/datastore:  undefined ()
    aws-amplify/in-app-messaging:  undefined ()
    aws-amplify/in-app-messaging/pinpoint:  undefined ()
    aws-amplify/push-notifications:  undefined ()
    aws-amplify/push-notifications/pinpoint:  undefined ()
    aws-amplify/storage:  undefined ()
    aws-amplify/storage/s3:  undefined ()
    aws-amplify/storage/s3/server:  undefined ()
    aws-amplify/storage/server:  undefined ()
    aws-amplify/utils:  undefined ()
    jest: ^29.7.0 => 29.7.0 
    ts-jest: ^29.1.2 => 29.1.4 
    ts-loader: ^9.5.1 => 9.5.1 
    typescript: ~5.4.5 => 5.4.5 
    webpack: ^5.91.0 => 5.91.0 
    webpack-bundle-analyzer: ^4.10.2 => 4.10.2 
    webpack-cli: ^5.1.4 => 5.1.4 

Describe the bug

According to this old sim 10727 & the V6 release notes I should expect much smaller compressed javascript as of V6. I'm seeing 400+Kb compressed with a single configure for amplify analytics & auth with amplify 6.3.1 using webpack with the standard config from create-react-app.

Expected behavior

Based on the V6 press release I was expecting something like 40-50K compressed.

Reproduction steps

Build the code/config below and get

Code Snippet

with the following dependencies

  "devDependencies": {
    "@amzn/brazil": "^2.0.6",
    "@tsconfig/node18": "^18.2.4",
    "@types/jest": "^29.5.12",
    "jest": "^29.7.0",
    "ts-jest": "^29.1.2",
    "ts-loader": "^9.5.1",
    "typescript": "~5.4.5",
    "webpack": "^5.91.0",
    "webpack-bundle-analyzer": "^4.10.2",
    "webpack-cli": "^5.1.4"
  },
  "dependencies": {
    "aws-amplify": "^6.3.4"
  }

The following webpack configuration

const path = require('path');
const TerserPlugin = require("terser-webpack-plugin");
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  mode: "production",
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  optimization: {
    minimize: true,
    //settings compied from react-web-app
    minimizer: [new TerserPlugin({terserOptions: {
            parse: {
              // We want terser to parse ecma 8 code. However, we don't want it
              // to apply any minification steps that turns valid ecma 5 code
              // into invalid ecma 5 code. This is why the 'compress' and 'output'
              // sections only apply transformations that are ecma 5 safe
              // https://github.com/facebook/create-react-app/pull/4234
              ecma: 8,
            },
            compress: {
              ecma: 5,
              warnings: false,
              // Disabled because of an issue with Uglify breaking seemingly valid code:
              // https://github.com/facebook/create-react-app/issues/2376
              // Pending further investigation:
              // https://github.com/mishoo/UglifyJS2/issues/2011
              comparisons: false,
              // Disabled because of an issue with Terser breaking valid code:
              // https://github.com/facebook/create-react-app/issues/5250
              // Pending further investigation:
              // https://github.com/terser-js/terser/issues/120
              inline: 2,
            },
            mangle: {
              safari10: true,
            },
            // Added for profiling in devtools
            keep_classnames: false,
            keep_fnames: false,
            output: {
              ecma: 5,
              comments: false,
              // Turned on because emoji and regex is not minified properly using default
              // https://github.com/facebook/create-react-app/issues/2488
              ascii_only: true,
            },
          },
        })],
  },
  plugins: [
    new BundleAnalyzerPlugin({analyzerMode: "static", openAnalyzer: false})
  ]
};

and the following index.ts

import { configureAutoTrack, enable, record } from "aws-amplify/analytics";
import { Amplify } from "aws-amplify";

const Analytics = {
  Pinpoint:{
    region:"us-east-1",
    appId:"..."
    
  }
}
const Auth = {
  Cognito: {
    identityPoolId: '...',
    allowGuestAccess: true 
  }
}


Amplify.configure({Analytics, Auth});

// Must come after configure to actually work.
configureAutoTrack({
  enable:true,
  type:"pageView",
  options:{
    appType:"multiPage"
  }
});

configureAutoTrack({
  enable: true,
  type: "event",
  options: {
    events: ['click'],
    selectorPrefix: 'data-amplify-analytics-'
  }
});

Log output

// Put your logs below this line

I see the following:

aws-exports.js

I'm not using aws-exports.js

Manual configuration

see code above.

Additional configuration

See code above.

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[smimicha]

Answering my own question: This was unrelated to amplify. My typescript configuration was munging the imports resulting in webpack not being able to optimize.

The following fixed the issue

{
  ...
  "compilerOptions": {
    "module":"ESNext",
    "moduleResolution":"bundler"
  },
  ...
}

``

[cwomack]

@smimicha, glad you were able to unblock yourself and find the root cause!

[smimicha]

Nothing like finally giving up and submitting a ticket to suddenly provide the "oh it was me all along" lightbulb moment:)