仅使用来自 Amplify UI 的 Authenticator 时,如何减小 React App 中的包大小?

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

我想使用我已关注的 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 中的 Authenticator 组件。我想知道我是否应该做一些类似的事情来从 Amplify UI 中导入 Authenticator,这样它就不会导入整个 ui-react 库,因为它似乎正在添加 1.8Mb到我的应用程序,如果我没看错的话,其中大部分来自图标。我导入 Authenticator,如下所示:

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

这是我的应用程序源地图:

package.json 看起来像这样:

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

在版本 2.12.0 之前,我们在 @aws-amplify/ui-react 包中遇到了一些 treeshaking 问题,这些问题导致图标无法被删除。这已在 2.12.0 版中修复。请参阅 CHANGELOG. 看起来您可能正在使用 2.10.4。您能确定您使用的是最新版本吗?

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

如果您在升级最新版本后没有看到捆绑包大小减少,那是一个错误,我们希望修复它。您可以回复此问题,或者回复 open a bug here.

会更好