reactjs - 使用动态导入将 fontawesome 移动到自己的包

Question

我试图通过将它分成几个块来减小我的包大小。BundleAnalyzerPlugin 告诉我，Fontawesome 已完全导入，即使我尝试只导入我需要的图标，这看起来很奇怪。

我的 fontawesome 进口

import { library } from '@fortawesome/fontawesome-svg-core';
import { faBell, faEyeSlash, faEye} from '@fortawesome/free-solid-svg-icons';
import { faBell as regularBell} from '@fortawesome/free-regular-svg-icons';

...
library.add( faBell, faEye, faEyeSlash, regularBell, regularCalendarAlt)

我的字体真棒版本

"@fortawesome/fontawesome": "^1.1.5",
"@fortawesome/fontawesome-free-regular": "^5.0.10",
"@fortawesome/fontawesome-free-solid": "^5.0.10",
"@fortawesome/fontawesome-svg-core": "^1.2.8",
"@fortawesome/react-fontawesome": "^0.1.3",

我正在尝试使用此处描述的 import() 拆分技术，但无法弄清楚如何使其适用于 Fontawesome。

return import(/* webpackChunkName: "lodash" */ 'lodash').then(({ default: _ }) => {
  ...
}

如何将 split fontawesome 放入它自己的包中并同步加载？

类似于预取/预加载的东西也可以工作，但是这些技术似乎对浏览器的支持很差？我很遗憾需要对 Safari 的支持。

我的 webpack 配置

  // Set up webpack plugins
  config.plugins = [
    nodeEnvPlugin,
    firebasePlugin,
    cssExtractPlugin,
    new BundleAnalyzerPlugin(
      {
        excludeAssets: /node_modules/,
        statsOptions: {
          exclude: /node_modules/
        }
      }
    )
  ]

亲切的问候/K

标签： reactjsbundlewebpack-4font-awesome-5

Answer 1

您正在尝试node_modules在部署时查看哪些不应该成为您的捆绑包的一部分。你应该配置你的 BundleAnalyzerPlugin 来查看 webpack 输出的目的地。这样你就可以完全确定哪些在尺寸方面消耗很大。

这是您选择的库中有关它的选项：

https://github.com/webpack-contrib/webpack-bundle-analyzer#bundledir

这是我在 fontawesome 优化上实现的相同技术

这是我的回购供您参考：https ://github.com/crrmacarse/crrmacarse.github.io