仅在 Amplify UI 中使用 Authenticator 时，如何减少 React App 中的包大小？

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

Authenticator 组件不会从其父目录导入任何内容，因此您可能只需从此处提取代码并安装任何缺少的依赖项。

Answer 2

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 .