如何在 gatsby 中使用 react-icons 但不影响性能？

Question

他们说安装（对于meteorjs、gatsbyjs等）是

npm install @react-icons/all-files --save

安装（用于标准现代项目）

npm install react-icons --save

这两种安装有什么区别，我使用的是安装（对于标准的现代项目），我应该使用另一种安装，因为我的 gatsby 网站太大了， 如果那样的话，我如何在安装中导入图标（对于meteorjs、gatsbyjs 等）。

我网站中的示例

import { FaPercent, FaCapsules, FaRing } from "react-icons/fa"

Answer 1

据我所知，两者都没有区别，因此性能应该没有区别。

反应图标：

• 版本：v4.1.0
• 两个月前发布
• 命令：npm i react-icons

@react-icons/所有文件

• 版本：v4.1.0
• 两个月前发布
• 命令：npm i @react-icons/all-files

两者都引用了相同的 Github 存储库，并且在 repo packages 中引用的文件 package.json 是相同的：

package.json:

{
  "name": "@react-icons/all-files",
  "version": "4.1.1-snapshot.0",
  "description": "SVG React icons of popular icon packs using ES6 imports",
  "author": "Goran Gajic",
  "contributors": [
    "kamijin_fanta <kamijin@live.jp>"
  ],
  "license": "MIT",
  "main": "lib",
  "types": "./lib/esm/index.d.ts",
  "sideEffects": false,
  "repository": {
    "type": "git",
    "url": "git+ssh://git@github.com:react-icons/react-icons.git"
  },
  "bugs": {
    "url": "https://github.com/react-icons/react-icons/issues"
  },
  "homepage": "https://github.com/react-icons/react-icons#readme",
  "peerDependencies": {
    "react": "*"
  }
}

但是当引用文档时，应该使用某些状态：

对于标准的现代项目：

npm install react-icons --save

对于meteorjs、gatsbyjs等：

如果您的项目规模扩大，则可以使用此选项。这种方法的代价是安装软件包需要很长时间。适用于 MeteorJS、Gatsbyjs 等。

npm install @react-icons/all-files --save

说到命令：

import { FaPercent, FaCapsules, FaRing } from "react-icons/fa"

指的是font-awesome 的图书馆。如果您引用 node_modules 中的安装目录，则所有图标包都位于两个字符目录中：

ai
bi
bs
cg
di
fa
etc.
etc.

如果您想引用任何其他图标，您只需附加两位数字符集，例如：

import { IconName } from "react-icons/gr";

为Grommet Icons

Answer 2

简而言之，@react-icons/all-files 旨在为 with bundlers other than webpack 工作。

故事比这更深入。维护者提到@react-icons/all-files 并表示：

如果您的项目规模扩大，此选项可用。

从react-icons/**：ALL icons are bundled at build-time, even when you are cherry-picking individual icons：导入存在一定的性能问题：

import { FaPercent, FaCapsules, FaRing } from "react-icons/fa"

这个问题似乎是特定于 webpack 的。人们设计了不同的解决方案，包括：

• importing from react-icons/**/index.mjs（注意index.mjs）：

import { MdPublic } from 'react-icons/md/index.mjs';

• modifying webpack config to resolve .mjs 和 this example 一样——显然是 order-sensitive，因此是 janky：

webpack: config => {
    config.resolve.extensions = [ '.mjs', '.js', '.jsx', '.json' ];

• importing individual icons using separate import statements:

import FaFacebookSquare from 'react-icons/lib/fa/facebook-square';
import FaLinkedin from 'react-icons/lib/fa/linkedin';
import FaTwitter from 'react-icons/lib/fa/twitter';
import FaPinterest from 'react-icons/lib/fa/pinterest-square';
import FaInstagram from 'react-icons/lib/fa/instagram';

• 甚至到create an intermediary package

最近的解决方案提到使用@react-icons/all-files/**，可能是combined with individual icon imports：

import { GrRotateLeft } from '@react-icons/all-files/gr/GrRotateLeft'
import { GrRotateRight } from '@react-icons/all-files/gr/GrRotateRight'

你也可以use babel-plugin-import and create a cherry-pickable @react-icons plugin:

import {FaBeer, FcApprove} from "@react-icons";

总而言之，除非你使用 webpack，仔细检查你的包大小，并真正从构建中挤出所有的汁液，否则你使用什么可能并不重要。