React 图标增加了包大小

Question

我知道这个问题已经被问过。但如果有任何更新，我想再次打开它。我在使用

react-icons

时遇到捆绑包大小问题。文档说使用

@react-icons/all-files

但存在问题，即并非所有图标。我喜欢那个库，因为它节省了我很多时间，但是现在，当我发现包大小问题导致该库时，它变得有点无用。为什么只有这个图书馆这么大……

Babel.config.js

module.exports = {
    presets: [
        [
            "@babel/preset-env",
            {
              "useBuiltIns": "entry",
              "modules": false
            }
        ],
        "@babel/preset-react",
        "@babel/preset-typescript"
    ]
}

webpack.js

 module: {
        rules: [
            {
                test: /\.(ts|tsx|js|mjs|jsx)$/,
                exclude: /nodeModules/,
                use: {
                    loader: "babel-loader"
                }
            },
...

这个捆绑包的大小真的很荒谬，所以我正在考虑聘请一位图形设计师来创建我自己的图标。

Answer 1

你不需要安装

@react-icons/all-files

除非你使用的是meteorjs、gatsbyjs等

将

npm i react-icons

用于标准现代项目

当开始使用

react-icons

时，我也面临着巨大的捆绑包大小，但一些更改使我摆脱了这种情况。

来自：

import fa from 'react-icons' // ❌ using like fa.FaHome

上面导入整个模块最终给出大的捆绑文件

致：

import {FaHome} from 'react-icons' // ✅ using like <FaHome/>

显然仅捆绑所需的图标