feat: Improve Next.js/CRA/Angular bundle sizes #7842

ericclemmons · 2021-03-01T22:59:17Z

Issue #, if available: Fixes #7570

This PR investigates why Next.js bundle size with Auth is so large.

Add Angular bundle size test
Tighten Next.js bundle size test
Set crypto: false to prevent require('crypto') polyfills in the browser

Workaround – Remove `crypto` polyfill for Next.js

Because create-react-app resolves .web.js, #7521 improved bundle-size.

We can do the same via next.config.js:

--- a/samples/next/auth/ssr-auth/next.config.js
+++ b/samples/next/auth/ssr-auth/next.config.js
@@ -1,3 +1,8 @@
 module.exports = {
   target: 'serverless',
+  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
+    config.resolve.extensions = ['.web.js', ...config.resolve.extensions]
+
+    return config
+  },
 }

The results are:

Page                                                           Size     First Load JS
┌ ○ /                                                          3.47 kB        66.2 kB
├   /_app                                                      0 B            62.7 kB
├ ○ /404                                                       3.46 kB        66.2 kB
├ ○ /Amplify                                                   875 B          67.4 kB
├ ○ /Amplify+Auth                                              37.9 kB         142 kB
├ ○ /Amplify+Storage                                           42.6 kB         146 kB
└ λ /api/hello                                                 0 B            62.7 kB
+ First Load JS shared by all                                  62.7 kB
  ├ chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.015d8f.js  13.1 kB
  ├ chunks/framework.e2fe4a.js                                 41.8 kB
  ├ chunks/main.a1fab4.js                                      6.62 kB
  ├ chunks/pages/_app.3da7c8.js                                530 B
  ├ chunks/webpack.50bee0.js                                   751 B
  └ css/2f26bb9842d84a608fa3.css                               202 B

Down to 142kB from 281kB, a savings of 138kB.

My sample application (using Auth and API) seems to work the same, so it looks like Next.js is polyfilling crypto in the browser only:

Proposals

Document this workaround with latest today?

https://docs.amplify.aws/start/getting-started/nextsteps/q/integration/next
Open an issue with Next.js to support .web.js
Remove crypto via browser in amazon-cognito-identity-js:

diff --git a/packages/amazon-cognito-identity-js/package.json b/packages/amazon-cognito-identity-js/package.json
index 35a3c4df3..c155133bf 100644
--- a/packages/amazon-cognito-identity-js/package.json
+++ b/packages/amazon-cognito-identity-js/package.json
@@ -60,6 +60,9 @@
     "lib/index.js": "./enhance-rn.js",
     "./src/StorageHelper": "./src/StorageHelper-rn.js"
   },
+  "browser": {
+    "crypto": false
+  },
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
   "types": "./index.d.ts",

Explicitly map .web.js files for Next.js:

--- a/packages/amazon-cognito-identity-js/package.json
+++ b/packages/amazon-cognito-identity-js/package.json
@@ -60,6 +60,10 @@
     "lib/index.js": "./enhance-rn.js",
     "./src/StorageHelper": "./src/StorageHelper-rn.js"
   },
+  "browser": {
+    "./es/utils/cryptoSecureRandomInt.js": "./es/utils/cryptoSecureRandomInt.web.js",
+    "./lib/utils/cryptoSecureRandomInt.js": "./lib/utils/cryptoSecureRandomInt.web.js"
+  },
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
   "types": "./index.d.ts",

[

Research

Next.js baseline

Notice the difference between / and /Amplify+Auth (~215kB):

$ next build
Page                                                           Size     First Load JS
┌ ○ /                                                          3.47 kB        66.2 kB
├   /_app                                                      0 B            62.7 kB
├ ○ /404                                                       3.46 kB        66.2 kB
├ ○ /Amplify                                                   875 B          67.4 kB
├ ○ /Amplify+Auth                                              175 kB          281 kB
├ ○ /Amplify+Storage                                           40.8 kB         146 kB
└ λ /api/hello                                                 0 B            62.7 kB
+ First Load JS shared by all                                  62.7 kB
  ├ chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.015d8f.js  13.1 kB
  ├ chunks/framework.e2fe4a.js                                 41.8 kB
  ├ chunks/main.a1fab4.js                                      6.62 kB
  ├ chunks/pages/_app.9bbe91.js                                532 B
  ├ chunks/webpack.50bee0.js                                   751 B
  └ css/2f26bb9842d84a608fa3.css                               202 B

This PR also introduces caps per-page to catch any future regressions:

$ yarn calculate

PASS .next/static/chunks/pages/Amplify-89b1e9717f9057dfb11f.js: 875B < 1KB (gzip)
PASS .next/static/chunks/pages/Amplify+Auth-0e436b759b6463284bac.js: 171.27KB < 175KB (gzip)
PASS .next/static/chunks/pages/Amplify+Storage-ab8e12816b1637a7dace.js: 34.86KB < 40KB (gzip)
PASS .next/static/chunks/pages/index-7d4f95fdaf137def4d7f.js: 3.39KB < 5KB (gzip)

CRA baseline

Based on the following App.js:

+ import { useEffect } from 'react';
import logo from './logo.svg';
import './App.css';

+ import { Amplify, Auth } from 'aws-amplify';
+
+ Amplify.configure();

+ function App() {
+	useEffect(() => {
+		Auth.currentAuthenticatedUser()
+			.then(console.log)
+			.catch(console.warn);
+	}, []);
...

$ SKIP_PREFLIGHT_CHECK=true react-scripts build
Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  84.97 KB (+43.64 KB)  build/static/js/2.8d76dd43.chunk.js
  31.08 KB (+30.51 KB)  build/static/js/main.f0f7bab4.chunk.js
  1.59 KB (-1 B)        build/static/js/3.c879f5a9.chunk.js
  1.16 KB (-1 B)        build/static/js/runtime-main.45a4c9fb.js
  531 B                 build/static/css/main.8c8b27cf.chunk.css

Why so many `bn.js`?

Looks like crypto polyfills, which #7521 solved for CRA.

$ yarn why bn.js
=> Found "bn.js@4.12.0"
info Has been hoisted to "bn.js"
info Reasons this module exists
   - Hoisted from "next#crypto-browserify#create-ecdh#bn.js"
   - Hoisted from "next#crypto-browserify#diffie-hellman#bn.js"
   - Hoisted from "next#crypto-browserify#public-encrypt#bn.js"
   - Hoisted from "next#crypto-browserify#diffie-hellman#miller-rabin#bn.js"
   - Hoisted from "next#crypto-browserify#browserify-sign#elliptic#bn.js"
   - Hoisted from "next#crypto-browserify#public-encrypt#parse-asn1#asn1.js#bn.js"
info Disk size without dependencies: "108KB"
info Disk size with unique dependencies: "108KB"
info Disk size with transitive dependencies: "108KB"
info Number of shared dependencies: 0
=> Found "browserify-sign#bn.js@5.2.0"
info This module exists because "next#crypto-browserify#browserify-sign" depends on it.
info Disk size without dependencies: "116KB"
info Disk size with unique dependencies: "116KB"
info Disk size with transitive dependencies: "116KB"
info Number of shared dependencies: 0
=> Found "browserify-rsa#bn.js@5.2.0"
info This module exists because "next#crypto-browserify#public-encrypt#browserify-rsa" depends on it.
info Disk size without dependencies: "116KB"
info Disk size with unique dependencies: "116KB"
info Disk size with transitive dependencies: "116KB"
info Number of shared dependencies: 0

Resources

https://github.com/defunctzombie/package-browser-field-spec#ignore-a-module

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

https://github.com/defunctzombie/package-browser-field-spec#ignore-a-module

codecov · 2021-03-02T17:53:15Z

Codecov Report

Merging #7842 (271b80c) into main (f271594) will not change coverage.
The diff coverage is 100.00%.

@@           Coverage Diff           @@
##             main    #7842   +/-   ##
=======================================
  Coverage   74.25%   74.25%           
=======================================
  Files         215      215           
  Lines       13473    13473           
  Branches     2646     2646           
=======================================
  Hits        10004    10004           
  Misses       3271     3271           
  Partials      198      198

Impacted Files	Coverage Δ
packages/core/src/Platform/version.ts	`100.00% <100.00%> (ø)`

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 0218cf5...271b80c. Read the comment docs.

sammartinez · 2021-03-02T18:29:55Z

packages/amazon-cognito-identity-js/package.json

@@ -60,6 +60,9 @@
    "lib/index.js": "./enhance-rn.js",
    "./src/StorageHelper": "./src/StorageHelper-rn.js"
  },
+  "browser": {
+    "crypto": false


I would like @manueliglesias to weigh in here. Since we just went through some fixes for Crypto

It's worth another pair of eyes for sure.

For clarity, this line prevents Webpack 4 (& Next.js) from including a crypto polyfill when it sees require('crypto') in our code.

This is because only CRA supports https://github.com/aws-amplify/amplify-js/blob/ad2dd864ffbe3bc5c620c3078f82805a4ed83439/packages/amazon-cognito-identity-js/src/utils/cryptoSecureRandomInt.web.js, but this line makes https://github.com/aws-amplify/amplify-js/blob/main/packages/amazon-cognito-identity-js/src/utils/cryptoSecureRandomInt.js not bloat up because of require('crypto').

…js into nextjs-bundle-size

ericclemmons

I added comments to the whole PR to navigate 👀 to what matters & why.

ericclemmons · 2021-03-03T21:02:02Z

.github/actions/bundle-size-action/angular/.browserslistrc

@@ -0,0 +1,17 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.


"Eric, why did you commit all of this Angular stuff!? Such bloat! Such wow!"

The bundle size tests should match what our "Getting Started" docs instruct users to do.

So if the default is ng init, this is the output of ng init + a bit Amplify.

This way, when a new version comes out of Angular, we can rm -rf angular, ng init the new boilerplate, and unstage the few lines of Amplify.

Hand-picking files/folders to delete would be a PITA.

ericclemmons · 2021-03-03T21:02:35Z

.github/actions/bundle-size-action/angular/src/polyfills.ts

+(window as any).global = window;
+(window as any).process = {
+	env: { DEBUG: undefined },
+};
+


This comes from our getting started guide ☝️

ericclemmons · 2021-03-03T21:03:06Z

.github/actions/bundle-size-action/angular/src/main.ts

+import { Amplify, Auth } from 'aws-amplify';
+Amplify.configure();
+Auth.currentAuthenticatedUser()
+	.then(console.info)
+	.catch(console.warn);
+


This is all the Amplify code we need to test tree-shaking ☝️

ericclemmons · 2021-03-03T21:03:39Z

.github/actions/bundle-size-action/cra/package.json

+	},
+	"scripts": {
+		"preanalyze": "$_ build",
+		"analyze": "source-map-explorer 'build/static/js/*.js'",


yarn analyze to see the CRA bundle output in a grid view.

ericclemmons · 2021-03-03T21:03:50Z

.github/actions/bundle-size-action/cra/package.json

+		"preanalyze": "$_ build",
+		"analyze": "source-map-explorer 'build/static/js/*.js'",
+		"precalculate": "$_ run build",
+		"calculate": "bundlewatch",


yarn calculate is used by the GitHub action to test bundle sizes

ericclemmons · 2021-03-03T21:04:14Z

.github/actions/bundle-size-action/cra/package.json

+			},
+			{
+				"path": "build/static/js/2.*.chunk.js",
+				"maxSize": "90kB"


Note that bundlewatch reports GZIP sizes instead of raw

ericclemmons · 2021-03-03T21:05:15Z

.github/actions/bundle-size-action/cra/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.


Same thing as the Angular note above ☝️ rm -rf cra && yarn create react-app should make this a breeze to test against new versions of CRA.

ericclemmons · 2021-03-03T21:05:36Z

.github/actions/bundle-size-action/cra/src/App.js

+import { Amplify, Auth } from 'aws-amplify';
+
+Amplify.configure();
+
+function App() {
+	useEffect(() => {
+		Auth.currentAuthenticatedUser()
+			.then(console.log)
+			.catch(console.warn);
+	}, []);


All we need to test tree-shaking in CRA

ericclemmons · 2021-03-03T21:06:16Z

.github/actions/bundle-size-action/next/next.config.js

@@ -0,0 +1,5 @@
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+	enabled: process.env.ANALYZE === 'true',


yarn analyze will output the server + client grid view of bundles

ericclemmons · 2021-03-03T21:06:39Z

.github/actions/bundle-size-action/next/pages/Amplify+Auth.js

+Amplify.configure();
+
+export default function Home() {
+	useEffect(() => {
+		Auth.currentAuthenticatedUser()
+			.then(console.log)
+			.catch(console.warn);
+	}, []);


All we need to test tree-shaking in Next.js ☝️

sammartinez

LGTM 🌮

github-actions · 2022-03-17T01:59:22Z

This pull request 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.

ericclemmons added 3 commits March 1, 2021 13:20

Add @next/bundle-analyzer

bbfac84

Split up next pages per-category

d02c904

Add bundle-size constraints to Next.js

c0019c4

ericclemmons requested a review from sammartinez as a code owner March 1, 2021 22:59

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

ericclemmons mentioned this pull request Mar 1, 2021

Adding Amplify Auth to a Next.js project has a huge impact of the chunk size #7570

Closed

ericclemmons added 2 commits March 1, 2021 17:46

Add CRA (Amplify + Auth) sample for bundle size comparisons

bc68152

Hint bundlers to not polyfill crypto

c9fefd6

https://github.com/defunctzombie/package-browser-field-spec#ignore-a-module

aws-amplify deleted a comment from codecov bot Mar 2, 2021

ericclemmons added 2 commits March 2, 2021 11:19

Watch CRA stack for bundle sizes

517a093

Tighten Next.js bundle to exclude crypto polyfill

a5c2c28

ericclemmons requested a review from amhinson March 2, 2021 17:54

Merge branch 'main' into nextjs-bundle-size

df2b131

amhinson approved these changes Mar 2, 2021

View reviewed changes

sammartinez reviewed Mar 2, 2021

View reviewed changes

ericclemmons requested a review from manueliglesias March 2, 2021 20:25

ericclemmons mentioned this pull request Mar 2, 2021

Bundle size reduction impossible through modular imports/dependencies #7839

Closed

ericclemmons added 2 commits March 2, 2021 19:11

Add angular bundle size test

afd6857

Merge branch 'nextjs-bundle-size' of github.com:ericclemmons/amplify-…

3418a43

…js into nextjs-bundle-size

ericclemmons changed the title ~~Investigation of Next.js bundle sizes~~ Investigation of Next.js/CRA/Angular bundle sizes Mar 3, 2021

ericclemmons mentioned this pull request Mar 3, 2021

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

Open

ericclemmons added 2 commits March 3, 2021 11:27

Merge branch 'main' into nextjs-bundle-size

c172c30

Merge branch 'main' into nextjs-bundle-size

31e0706

ericclemmons commented Mar 3, 2021

View reviewed changes

ericclemmons changed the title ~~Investigation of Next.js/CRA/Angular bundle sizes~~ Improve Next.js/CRA/Angular bundle sizes Mar 3, 2021

Merge branch 'main' into nextjs-bundle-size

18f1d8b

ericclemmons changed the title ~~Improve Next.js/CRA/Angular bundle sizes~~ feat: Improve Next.js/CRA/Angular bundle sizes Mar 4, 2021

Merge branch 'main' into nextjs-bundle-size

26acdb9

sammartinez approved these changes Mar 12, 2021

View reviewed changes

Merge branch 'main' into nextjs-bundle-size

271b80c

ericclemmons merged commit 2e0dc61 into aws-amplify:main Mar 16, 2021

This was referenced Apr 20, 2021

[Snyk] Upgrade @aws-amplify/core from 3.8.16 to 3.8.21 majacQ/amplify-js#4

Merged

[Snyk] Upgrade @aws-amplify/api-graphql from 1.2.24 to 1.2.29 majacQ/amplify-js#5

Merged

[Snyk] Upgrade @aws-amplify/api-rest from 1.2.24 to 1.2.29 majacQ/amplify-js#6

Merged

github-actions bot locked as resolved and limited conversation to collaborators Mar 17, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Improve Next.js/CRA/Angular bundle sizes #7842

feat: Improve Next.js/CRA/Angular bundle sizes #7842

ericclemmons commented Mar 1, 2021 •

edited

Loading

codecov bot commented Mar 2, 2021 •

edited

Loading

sammartinez Mar 2, 2021

ericclemmons Mar 2, 2021

ericclemmons left a comment

ericclemmons Mar 3, 2021

ericclemmons Mar 3, 2021

ericclemmons Mar 3, 2021

ericclemmons Mar 3, 2021

ericclemmons Mar 3, 2021

ericclemmons Mar 3, 2021

ericclemmons Mar 3, 2021

ericclemmons Mar 3, 2021

ericclemmons Mar 3, 2021

ericclemmons Mar 3, 2021

sammartinez left a comment

github-actions bot commented Mar 17, 2022

		@@ -0,0 +1,17 @@
		# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.

		@@ -0,0 +1,23 @@
		# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

		@@ -0,0 +1,5 @@
		const withBundleAnalyzer = require('@next/bundle-analyzer')({
		enabled: process.env.ANALYZE === 'true',

feat: Improve Next.js/CRA/Angular bundle sizes #7842

feat: Improve Next.js/CRA/Angular bundle sizes #7842

Conversation

ericclemmons commented Mar 1, 2021 • edited Loading

Workaround – Remove crypto polyfill for Next.js

Proposals

Research

Next.js baseline

CRA baseline

Why so many bn.js?

Resources

codecov bot commented Mar 2, 2021 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ericclemmons left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sammartinez left a comment

Choose a reason for hiding this comment

github-actions bot commented Mar 17, 2022

ericclemmons commented Mar 1, 2021 •

edited

Loading

Workaround – Remove `crypto` polyfill for Next.js

Why so many `bn.js`?

codecov bot commented Mar 2, 2021 •

edited

Loading