How can I reduce the bundle size in React App when only using Authenticator from Amplify UI?

Question

I would like to use the Authenticator component from Amplify UI for sign in in my React App but doing so makes my apps bundle size huge; it is currently 3Mb. I have seen the discussion on reducing bundle size for Amplify more broadly which led to this release/blog which I have followed. I am wondering if there is something similar I should be doing to import the Authenticator from Amplify UI in such a way that it does not import the entire ui-react library because it seems that is adding 1.8Mb to my app, most of which is coming from icons if I'm reading the chart right. I import the Authenticator as shown below:

import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

Here is my source map for the app:

package.json looks like this:

Answer 1

Prior to version 2.12.0 we had some treeshaking issues in the @aws-amplify/ui-react package which prevented the icons from being removed. This was fixed in version 2.12.0. See CHANGELOG. It looks like you may be using 2.10.4. Can you make sure you are on the latest version?

npm install @aws-amplify/ui-react@latest

If you don't see a reduction in bundle size after upgrading the latest version that's a bug, and we would like to get it fixed. You can either respond to this issue or even better would be to open a bug here.

Answer 2

The Authenticator component does not import anything from its parent directories, so you could probably just extract the code from here and install any dependencies that are missing.