Bundle size reduction impossible through modular imports/dependencies #7839

hentschelpatrick · 2021-03-01T13:16:39Z

Describe the bug
We are trying to reduce the bundle size be refactoring the aws-amplify package to it's modular components.
Everything worked fine until we deleted the aws-amplify package at the last step and added the @aws-amplify/api-graphql package.

To Reproduce
To reduce the huge bundle size we are refactoring to modular imports from the aws-amplify package.
As original dependency we had:

"aws-appsync": "^4.0.1",
"aws-amplify": "^3.3.18",

and I could refactor it to:

"@aws-amplify/analytics": "^3.2.5",
"@aws-amplify/api": "^3.2.24",
"@aws-amplify/auth": "^3.3.3",
"@aws-amplify/storage": "^3.3.24",

when deleting the package aws-amplify and replacing it by: @aws-amplify/api-graphql as the modular dependency for the API calls the following import signatures in the API Service changed:

import API, { graphqlOperation, GraphQLResult } from "aws-amplify";

to

import API, { graphqlOperation, GraphQLResult } from "@aws-amplify/api-graphql";

Expected behavior
The angular app continues working

Code Snippet

"dependencies": {
		"@angular/animations": "^10.1.0",
		"@angular/cdk": "^10.2.7",
		"@angular/common": "^10.1.0",
		"@angular/compiler": "^10.1.0",
		"@angular/core": "^10.1.0",
		"@angular/forms": "^10.1.0",
		"@angular/material": "^10.2.7",
		"@angular/platform-browser": "^10.1.0",
		"@angular/platform-browser-dynamic": "^10.1.0",
		"@angular/router": "^10.1.0",
		"@angular/service-worker": "^10.1.0",
		"@aws-amplify/analytics": "^3.2.5",
		"@aws-amplify/api": "^3.2.24",
		"@aws-amplify/api-graphql": "^1.2.24",
		"@aws-amplify/auth": "^3.3.3",
		"@aws-amplify/storage": "^3.3.24",
		"@ngx-translate/core": "^13.0.0",
		"@ngx-translate/http-loader": "^6.0.0",
		"@nrwl/angular": "10.4.4",
		"@tensorflow-models/posenet": "^2.2.1",
		"@tensorflow/tfjs-backend-webgl": "^3.2.0",
		"@tensorflow/tfjs-converter": "^2.8.0",
		"@tensorflow/tfjs-core": "^2.8.0",
		"aws-appsync": "^4.0.1",
		"chart.js": "^2.9.4",
		"crypto-js": "^4.0.0",
		"graphql": "^15.5.0",
		"idb": "^6.0.0",
		"ng2-charts": "^2.4.2",
		"rxjs": "~6.5.5",
		"typed-graphql": "^1.0.2",
		"webpack-bundle-analyzer": "^4.4.0",
		"zone.js": "^0.10.2"
	},

Screenshots
Error when the application calls the GraphQL API from AWS

What is Configured?

const awsmobile = {
    "aws_project_region": "XX-XXXX-X",
    "aws_cognito_identity_pool_id": "XXXXXXXXXXXXXXXXXXXXX",
    "aws_cognito_region": "XX-XXXX-X",
    "aws_user_pools_id": "XX-XXXX-X_XXXX",
    "aws_user_pools_web_client_id": "XXXXX",
    "oauth": {},
    "aws_mobile_analytics_app_id": "XXXX",
    "aws_mobile_analytics_app_region": "XX-XXXX-X",
    "aws_user_files_s3_bucket": "X-staging",
    "aws_user_files_s3_bucket_region": "XX-XXXX-X",
    "aws_appsync_graphqlEndpoint": "https://XXXXXXXX/graphql",
    "aws_appsync_region": "XX-XXXX-X",
    "aws_appsync_authenticationType": "AMAZON_COGNITO_USER_POOLS"
}

Environment

System:
    OS: macOS 11.2.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 158.36 MB / 32.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 14.15.1 - ~/.nvm/versions/node/v14.15.1/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.15.1/bin/yarn
    npm: 6.14.10 - ~/.nvm/versions/node/v14.15.1/bin/npm
  Browsers:
    Chrome: 88.0.4324.192
    Safari: 14.0.3
  npmPackages:
    @angular-devkit/build-angular: ~0.1001.3 => 0.1001.7 
    @angular/animations: ^10.1.0 => 10.2.3 
    @angular/cdk: ^10.2.7 => 10.2.7 
    @angular/cli: ~10.1.3 => 10.1.7 
    @angular/common: ^10.1.0 => 10.2.3 
    @angular/compiler: ^10.1.0 => 10.2.3 
    @angular/compiler-cli: ^10.1.0 => 10.2.3 
    @angular/core: ^10.1.0 => 10.2.3 
    @angular/forms: ^10.1.0 => 10.2.3 
    @angular/language-service: ^10.1.0 => 10.2.3 
    @angular/material: ^10.2.7 => 10.2.7 
    @angular/platform-browser: ^10.1.0 => 10.2.3 
    @angular/platform-browser-dynamic: ^10.1.0 => 10.2.3 
    @angular/router: ^10.1.0 => 10.2.3 
    @angular/service-worker: ^10.1.0 => 10.2.3 
    @aws-amplify/analytics: ^3.2.5 => 3.2.5 
    @aws-amplify/api: ^3.2.24 => 3.2.24 
    @aws-amplify/api-graphql: ^1.2.24 => 1.2.24 
    @aws-amplify/auth: ^3.3.3 => 3.3.3 
    @aws-amplify/storage: ^3.3.24 => 3.3.24 
    @ngneat/spectator: ^6.1.2 => 6.1.2 
    @ngx-translate/core: ^13.0.0 => 13.0.0 
    @ngx-translate/http-loader: ^6.0.0 => 6.0.0 
    @nrwl/angular: 10.4.4 => 10.4.4 
    @nrwl/cli: 10.4.4 => 10.4.4 
    @nrwl/cypress: 10.4.4 => 10.4.4 
    @nrwl/eslint-plugin-nx: 10.4.4 => 10.4.4 
    @nrwl/jest: 10.4.4 => 10.4.4 
    @nrwl/tao: 10.4.4 => 10.4.4 
    @nrwl/workspace: 10.4.4 => 10.4.4 
    @tensorflow-models/posenet: ^2.2.1 => 2.2.1 
    @tensorflow/tfjs-backend-webgl: ^3.2.0 => 3.2.0 
    @tensorflow/tfjs-converter: ^2.8.0 => 2.8.6 
    @tensorflow/tfjs-core: ^2.8.0 => 2.8.6 
    @types/jest: 26.0.8 => 26.0.8 
    @types/node: ~8.9.4 => 8.9.5 
    @typescript-eslint/eslint-plugin: 4.3.0 => 4.3.0 
    @typescript-eslint/parser: 4.3.0 => 4.3.0 
    aws-appsync: ^4.0.1 => 4.0.1 
    chart.js: ^2.9.4 => 2.9.4 
    codelyzer: ~5.0.1 => 5.0.1 
    crypto-js: ^4.0.0 => 4.0.0 
    cypress: ^6.1.0 => 6.1.0 
    cypress-cucumber-preprocessor: ^4.0.0 => 4.0.0 
    eslint: 7.10.0 => 7.10.0 
    eslint-config-prettier: 6.0.0 => 6.0.0 
    eslint-plugin-cypress: ^2.10.3 => 2.11.2 
    fake-indexeddb: ^3.1.2 => 3.1.2 
    faker: ^5.1.0 => 5.1.0 
    graphql: ^15.5.0 => 15.5.0 
    idb: ^6.0.0 => 6.0.0 
    jest: 26.2.2 => 26.2.2 
    jest-preset-angular: 8.3.1 => 8.3.1 
    ng2-charts: ^2.4.2 => 2.4.2 
    prettier: 2.1.2 => 2.1.2 
    rxjs: ~6.5.5 => 6.5.5 
    ts-jest: 26.4.0 => 26.4.0 
    ts-node: ~7.0.0 => 7.0.1 
    tslint: ~6.0.0 => 6.0.0 
    typed-graphql: ^1.0.2 => 1.0.2 
    typescript: ~4.0.3 => 4.0.5 
    webpack-bundle-analyzer: ^4.4.0 => 4.4.0 
    zone.js: ^0.10.2 => 0.10.3 
  npmGlobalPackages:
    @angular/cli: 11.0.2
    amplify: 0.0.11
    cross-env: 7.0.3
    firebase-tools: 8.16.2
    gitex-flow: 2.2.1
    http-server: 0.12.3
    jshint: 2.12.0
    npm: 6.14.10
    stencil: 0.0.5
    typescript: 4.1.2
    yarn: 1.22.10

The text was updated successfully, but these errors were encountered:

iartemiev · 2021-03-01T15:01:07Z

You should never need to manually install the @aws-amplify/* packages. We recommend installing aws-amplify and letting your build tool tree shake the dependencies when you build your app for production. Is this not working as expected with Angular 10?

hentschelpatrick · 2021-03-01T15:39:53Z

@iartemiev it isn't we do get about 15mb in total bundle size from 2 aws-amplify packages and 1 aws-sdk package. All we get from the console are warnings with this message:

CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

ericclemmons · 2021-03-02T23:44:31Z

I just reproduced this via:

npx -p @angular/cli ng new angular
yarn build

Initial Chunk Files | Names         |      Size
vendor.js           | vendor        |   2.10 MB
polyfills.js        | polyfills     | 128.88 kB
main.js             | main          |  54.99 kB
runtime.js          | runtime       |   6.15 kB
styles.css          | styles        | 437 bytes

                    | Initial Total |   2.28 MB

Then, I updated the app based on our docs:

https://docs.amplify.aws/start/getting-started/hosting/q/integration/angular

diff --git a/.github/actions/bundle-size-action/angular/src/main.ts b/.github/actions/bundle-size-action/angular/src/main.ts
index 87454d40b..da16c6242 100644
--- a/.github/actions/bundle-size-action/angular/src/main.ts
+++ b/.github/actions/bundle-size-action/angular/src/main.ts
@@ -4,6 +4,12 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';

+import { Amplify, Auth } from 'aws-amplify';
+Amplify.configure();
+Auth.currentAuthenticatedUser()
+       .then(console.info)
+       .catch(console.warn);
+
 if (environment.production) {
        enableProdMode();
 }
diff --git a/.github/actions/bundle-size-action/angular/src/polyfills.ts b/.github/actions/bundle-size-action/angular/src/polyfills.ts
index 5812bad0d..1e3100a58 100644
--- a/.github/actions/bundle-size-action/angular/src/polyfills.ts
+++ b/.github/actions/bundle-size-action/angular/src/polyfills.ts
@@ -54,6 +54,11 @@
  *
  */

+(window as any).global = window;
+(window as any).process = {
+       env: { DEBUG: undefined },
+};
+
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */

yarn build

Initial Chunk Files | Names         |      Size
vendor.js           | vendor        |  14.33 MB
polyfills.js        | polyfills     | 128.88 kB
main.js             | main          |  55.13 kB
runtime.js          | runtime       |   6.15 kB
styles.css          | styles        | 437 bytes

                    | Initial Total |  14.52 MB

Build at: 2021-03-02T23:42:26.590Z - Hash: 2e22e0b09f82db47e3d8 - Time: 12985ms

Warning: ./node_modules/amazon-cognito-identity-js/es/utils/cryptoSecureRandomInt.js
Module not found: Error: Can't resolve 'crypto' in '/Users/ecclemm/Projects/ericclemmons/amplify-js/.github/actions/bundle-size-action/angular/node_modules/amazon-cognito-identity-js/es/utils'
resolve 'crypto' in '/Users/ecclemm/Projects/ericclemmons/amplify-js/.github/actions/bundle-size-action/angular/node_modules/amazon-cognito-identity-js/es/utils'
  Parsed request is a module
  using description file: /Users/ecclemm/Projects/ericclemmons/amplify-js/.github/actions/bundle-size-action/angular/node_modules/amazon-cognito-identity-js/package.json (relative path: ./es/utils)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module

So then I added browser: { crypto: false } (based on #7842) and got closer:

Initial Chunk Files | Names         |      Size
vendor.js           | vendor        |  14.33 MB
polyfills.js        | polyfills     | 128.88 kB
main.js             | main          |  55.32 kB
runtime.js          | runtime       |   6.15 kB
styles.css          | styles        | 437 bytes

                    | Initial Total |  14.52 MB

Build at: 2021-03-02T23:43:55.093Z - Hash: 8b5b7efb0574e83235e7 - Time: 12730ms

Warning: /Users/ecclemm/Projects/ericclemmons/amplify-js/.github/actions/bundle-size-action/angular/node_modules/@aws-amplify/auth/lib-esm/Auth.js depends on 'url'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/ecclemm/Projects/ericclemmons/amplify-js/.github/actions/bundle-size-action/angular/node_modules/@aws-amplify/analytics/lib-esm/Providers/AWSPinpointProvider.js depends on 'uuid'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/ecclemm/Projects/ericclemmons/amplify-js/.github/actions/bundle-size-action/angular/node_modules/@aws-amplify/datastore/lib-esm/datastore/datastore.js depends on 'uuid'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/ecclemm/Projects/ericclemmons/amplify-js/.github/actions/bundle-size-action/angular/node_modules/amazon-cognito-identity-js/es/AuthenticationHelper.js depends on 'crypto-js/hmac-sha256'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/ecclemm/Projects/ericclemmons/amplify-js/.github/actions/bundle-size-action/angular/node_modules/amazon-cognito-identity-js/es/AuthenticationHelper.js depends on 'crypto-js/lib-typedarrays'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/ecclemm/Projects/ericclemmons/amplify-js/.github/actions/bundle-size-action/angular/node_modules/@aws-amplify/core/lib-esm/Signer.js depends on '@aws-crypto/sha256-js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/ecclemm/Projects/ericclemmons/amplify-js/.github/actions/bundle-size-action/angular/node_modules/amazon-cognito-identity-js/es/CookieStorage.js depends on 'js-cookie'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/ecclemm/Projects/ericclemmons/amplify-js/.github/actions/bundle-size-action/angular/node_modules/@aws-amplify/analytics/lib-esm/Providers/AmazonPersonalizeProvider.js depends on 'lodash/isEqual'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/ecclemm/Projects/ericclemmons/amplify-js/.github/actions/bundle-size-action/angular/node_modules/@aws-amplify/analytics/lib-esm/Providers/AmazonPersonalizeProvider.js depends on 'lodash/isEmpty'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/ecclemm/Projects/ericclemmons/amplify-js/.github/actions/bundle-size-action/angular/node_modules/@aws-amplify/analytics/lib-esm/Providers/AmazonPersonalizeProvider.js depends on 'lodash/get'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/ecclemm/Projects/ericclemmons/amplify-js/.github/actions/bundle-size-action/angular/node_modules/zen-observable-ts/lib/bundle.esm.js depends on 'zen-observable'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/ecclemm/Projects/ericclemmons/amplify-js/.github/actions/bundle-size-action/angular/node_modules/@aws-amplify/storage/lib-esm/providers/axios-http-handler.js depends on 'axios'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/ecclemm/Projects/ericclemmons/amplify-js/.github/actions/bundle-size-action/angular/node_modules/amazon-cognito-identity-js/es/Client.js depends on 'isomorphic-unfetch'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/ecclemm/Projects/ericclemmons/amplify-js/.github/actions/bundle-size-action/angular/node_modules/@aws-sdk/eventstream-marshaller/dist/es/EventStreamMarshaller.js depends on '@aws-crypto/crc32'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/ecclemm/Projects/ericclemmons/amplify-js/.github/actions/bundle-size-action/angular/node_modules/@aws-sdk/client-rekognition/dist/es/runtimeConfig.browser.js depends on '@aws-crypto/sha256-browser'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/ecclemm/Projects/ericclemmons/amplify-js/.github/actions/bundle-size-action/angular/node_modules/@aws-sdk/client-s3/dist/es/protocols/Aws_restXml.js depends on 'fast-xml-parser'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies


✨  Done in 17.06s.

ericclemmons · 2021-03-03T01:01:43Z

Oh wait. I'm not great with angular, but yarn build --prod looked MUCH better!

$ ng build --prod
✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files               | Names         |      Size
main.2c551ec1947ae348ae65.js      | main          | 409.53 kB
polyfills.0890d7c9952feb894639.js | polyfills     |  36.04 kB
runtime.7425f237727658da0a30.js   | runtime       |   1.45 kB
styles.3ff695c00d717f2d2a11.css   | styles        |   0 bytes

                                  | Initial Total | 447.02 kB

Build at: 2021-03-03T00:53:47.844Z - Hash: fa80dd58a3a71734ee63 - Time: 24319ms

Warning: /Users/ecclemm/Projects/ericclemmons/amplify-js/.github/actions/bundle-size-action/angular/node_modules/@aws-amplify/auth/lib-esm/Auth.js depends on 'url'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/ecclemm/Projects/ericclemmons/amplify-js/.github/actions/bundle-size-action/angular/node_modules/@aws-amplify/analytics/lib-esm/Providers/AWSPinpointProvider.js depends on 'uuid'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/ecclemm/Projects/ericclemmons/amplify-js/.github/actions/bundle-size-action/angular/node_modules/@aws-amplify/datastore/lib-esm/datastore/datastore.js depends on 'uuid'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/ecclemm/Projects/ericclemmons/amplify-js/.github/actions/bundle-size-action/angular/node_modules/@aws-amplify/analytics/lib-esm/Providers/AmazonPersonalizeProvider.js depends on 'lodash/isEmpty'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/ecclemm/Projects/ericclemmons/amplify-js/.github/actions/bundle-size-action/angular/node_modules/@aws-amplify/analytics/lib-esm/Providers/AmazonPersonalizeProvider.js depends on 'lodash/isEqual'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/ecclemm/Projects/ericclemmons/amplify-js/.github/actions/bundle-size-action/angular/node_modules/@aws-amplify/analytics/lib-esm/Providers/AmazonPersonalizeProvider.js depends on 'lodash/get'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/ecclemm/Projects/ericclemmons/amplify-js/.github/actions/bundle-size-action/angular/node_modules/amazon-cognito-identity-js/es/CookieStorage.js depends on 'js-cookie'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/ecclemm/Projects/ericclemmons/amplify-js/.github/actions/bundle-size-action/angular/node_modules/@aws-amplify/storage/lib-esm/providers/axios-http-handler.js depends on 'axios'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/ecclemm/Projects/ericclemmons/amplify-js/.github/actions/bundle-size-action/angular/node_modules/amazon-cognito-identity-js/es/AuthenticationHelper.js depends on 'crypto-js/hmac-sha256'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/ecclemm/Projects/ericclemmons/amplify-js/.github/actions/bundle-size-action/angular/node_modules/amazon-cognito-identity-js/es/AuthenticationHelper.js depends on 'crypto-js/lib-typedarrays'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/ecclemm/Projects/ericclemmons/amplify-js/.github/actions/bundle-size-action/angular/node_modules/amazon-cognito-identity-js/es/AuthenticationHelper.js depends on 'crypto-js/sha256'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/ecclemm/Projects/ericclemmons/amplify-js/.github/actions/bundle-size-action/angular/node_modules/amazon-cognito-identity-js/es/CognitoUser.js depends on 'crypto-js/enc-base64'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/ecclemm/Projects/ericclemmons/amplify-js/.github/actions/bundle-size-action/angular/node_modules/amazon-cognito-identity-js/es/Client.js depends on 'isomorphic-unfetch'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/ecclemm/Projects/ericclemmons/amplify-js/.github/actions/bundle-size-action/angular/node_modules/@aws-sdk/eventstream-marshaller/dist/es/EventStreamMarshaller.js depends on '@aws-crypto/crc32'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/ecclemm/Projects/ericclemmons/amplify-js/.github/actions/bundle-size-action/angular/node_modules/@aws-sdk/client-textract/dist/es/runtimeConfig.browser.js depends on '@aws-crypto/sha256-browser'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/ecclemm/Projects/ericclemmons/amplify-js/.github/actions/bundle-size-action/angular/node_modules/@aws-sdk/client-s3/dist/es/protocols/Aws_restXml.js depends on 'fast-xml-parser'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/ecclemm/Projects/ericclemmons/amplify-js/.github/actions/bundle-size-action/angular/node_modules/@aws-amplify/core/lib-esm/Signer.js depends on '@aws-crypto/sha256-js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

(Adding https://gist.github.com/gsans/8982c126c4fef668c094ff288f04241b got rid of the errors.)

For comparison, my vanilla app looks like:

$ ng build --prod
✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files               | Names         |      Size
main.9e5ef2589a32d22a3791.js      | main          | 134.96 kB
polyfills.9d7f1bb7deba7d27ca41.js | polyfills     |  36.04 kB
runtime.7425f237727658da0a30.js   | runtime       |   1.45 kB
styles.3ff695c00d717f2d2a11.css   | styles        |   0 bytes

@hentschelpatrick Can you use aws-amplify, @angular/cli@~11.2.2, and ng build --prod to see if it's the same for you?

hentschelpatrick · 2021-03-03T09:53:04Z

I migrated to angular 11.2.2 and tried it again:

✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.
✔ Service worker generation complete.

Initial Chunk Files               | Names         |      Size
main.099ccf3ebd18902f7bea.js      | main          |   1.98 MB
styles.325776b7308880354ee8.css   | styles        |  75.69 kB
polyfills.00a5d41e3a21d461214d.js | polyfills     |  36.05 kB
runtime.88d9ea1b2ef45c20acc7.js   | runtime       |   2.22 kB

                                  | Initial Total |   2.10 MB

Lazy Chunk Files                  | Names         |      Size
4.4cc8ee3974ef6e9b6912.js         | -             | 868.48 kB

it did help a lot, sadly we got introduced new errors from the migration.
Thanks for your help!

ChrisSargent · 2021-06-07T15:38:41Z

You should never need to manually install the @aws-amplify/* packages. We recommend installing aws-amplify and letting your build tool tree shake the dependencies when you build your app for production. Is this not working as expected with Angular 10?

This seems to contradict some documentation / tutorials I've seen. Could you please link to where this is officially stated?

ericclemmons · 2021-06-07T15:51:21Z

@ChrisSargent The official documentation should be referencing aws-amplify everywhere npm install is used:

https://docs.amplify.aws/start/getting-started/setup/q/integration/angular#install-amplify-libraries

If this isn't the case, let us know so we can update it 🙏

ChrisSargent · 2021-06-07T15:58:16Z

Okay - I'll keep an eye open and open a ticket if I find some again. Perhaps it was in older tutorials on the blog.

ChrisSargent · 2021-06-07T16:01:51Z

FYI, I swapped to having all my imports the way you recommended and my bundle size went from 601kb to 642kb - a not-insignificant increase to an already huge bundle size from the Auth module, relating to this issue: #7570

github-actions · 2022-06-08T02:11:45Z

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.

hentschelpatrick added the to-be-reproduced Used in order for Amplify to reproduce said issue label Mar 1, 2021

iartemiev added Build Related to build issues pending-close-response-required and removed to-be-reproduced Used in order for Amplify to reproduce said issue labels Mar 1, 2021

stale bot removed the pending-close-response-required label Mar 1, 2021

sammartinez added the to-be-reproduced Used in order for Amplify to reproduce said issue label Mar 1, 2021

ericclemmons added this to the Bundle Size Optimizations milestone Mar 1, 2021

ericclemmons added bug Something isn't working and removed to-be-reproduced Used in order for Amplify to reproduce said issue labels Mar 2, 2021

hentschelpatrick closed this as completed Mar 3, 2021

ericclemmons mentioned this issue Mar 3, 2021

Lots of warnings in Angular 9 CommonJS or AMD dependencies can cause optimization bailouts. #6202

Open

github-actions bot locked as resolved and limited conversation to collaborators Jun 8, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bundle size reduction impossible through modular imports/dependencies #7839

Bundle size reduction impossible through modular imports/dependencies #7839

hentschelpatrick commented Mar 1, 2021

iartemiev commented Mar 1, 2021

hentschelpatrick commented Mar 1, 2021

ericclemmons commented Mar 2, 2021

ericclemmons commented Mar 3, 2021

hentschelpatrick commented Mar 3, 2021

ChrisSargent commented Jun 7, 2021

ericclemmons commented Jun 7, 2021

ChrisSargent commented Jun 7, 2021

ChrisSargent commented Jun 7, 2021

github-actions bot commented Jun 8, 2022

Bundle size reduction impossible through modular imports/dependencies #7839

Bundle size reduction impossible through modular imports/dependencies #7839

Comments

hentschelpatrick commented Mar 1, 2021

iartemiev commented Mar 1, 2021

hentschelpatrick commented Mar 1, 2021

ericclemmons commented Mar 2, 2021

ericclemmons commented Mar 3, 2021

hentschelpatrick commented Mar 3, 2021

ChrisSargent commented Jun 7, 2021

ericclemmons commented Jun 7, 2021

ChrisSargent commented Jun 7, 2021

ChrisSargent commented Jun 7, 2021

github-actions bot commented Jun 8, 2022