当尝试使用' react-icons '动态导入时，NextJS会导入所有内容

Question

我需要使用react-icons包中的图标。
每当我将它与import语句一起使用时，我得到的包大小如下:

Route (pages)                              Size     First Load JS
┌ ● /                                      7.41 kB        87.1 kB
├   /_app                                  0 B              77 kB
├ ○ /404                                   181 B          77.2 kB
├ ○ /auth                                  2.19 kB        79.2 kB
├ ○ /create (483 ms)                       3.72 kB        83.4 kB
├ λ /post/[name]                           78.8 kB         158 kB
├ λ /post/author/[name]                    3.24 kB        82.9 kB
├ ○ /settings                              3.6 kB         83.3 kB
├ λ /users                                 3.09 kB        82.8 kB
└ λ /users/[name]                          3.2 kB         82.9 kB
+ First Load JS shared by all              81.1 kB
├ chunks/framework-3b5a00d5d7e8d93b.js   45.4 kB
├ chunks/main-b5f8370d8042886c.js        27.4 kB
├ chunks/pages/_app-db3210ce0bd19d50.js  1.92 kB

用户/index.tsx

import { BsFillPeopleFill } from "react-icons/bs";

基本上，首先加载JS始终在70 - 83kb之间保持一致(尽管/post/[name]路由有158kb)

但是每当我试图用dynamic动态导入图标组件时，这就是我得到的:

Route (pages)                              Size     First Load JS
┌ ● /                                      7.42 kB         266 kB
├   /_app                                  0 B              77 kB
├ ○ /404                                   181 B          77.2 kB
├ ○ /auth                                  2.19 kB        79.2 kB
├ ○ /create                                3.73 kB         262 kB
├ λ /post/[name]                           78.8 kB         337 kB
├ λ /post/author/[name]                    3.25 kB         262 kB
├ ○ /settings                              3.61 kB         262 kB
├ λ /users                                 3.12 kB         262 kB
└ λ /users/[name]                          3.21 kB         262 kB
+ First Load JS shared by all              81.1 kB
├ chunks/framework-3b5a00d5d7e8d93b.js   45.4 kB
├ chunks/main-b5f8370d8042886c.js        27.4 kB
├ chunks/pages/_app-db3210ce0bd19d50.js  1.92 kB
├ chunks/webpack-e486fd67877a5f73.js     2.25 kB
└ css/a905066d5b28cc23.css               4.07 kB

用户/index.tsx

const BsFillPeopleFill = dynamic(() => import("react-icons/bs").then(bootstrapIcons => bootstrapIcons.BsFillPeopleFill));

可以看到，它只是加了使用图标的路由最多200kb。我真的不知道为什么要导入整个react-icons/bs部分，而不是只导入一个图标并将其拆分为一个包。

有谁能帮我解决这个问题吗?

Answer 1

Siri。几个月前我也遇到过类似的问题。下面是我如何修复它。

首先，创建一个新文件，例如:"跑龙套/组件/图标。并从该文件中的react-icons包中导出所需的图标。这样的:

export { BsFillPeopleFill } from "react-icons/bs";

然后在你的users/index中。你可以动态地从"utils/components/icons"中导入图标。ts文件。这样的:

const BsFillPeopleFill = dynamic(() => import("utils/components/icons").then(icons => icons.BsFillPeopleFill));

希望对你有帮助。