使用动态导入将 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)

我的 fontawesome 版本

"@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() 拆分技术 described here 但不知道如何让它适用于 Fontawesome。

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

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

类似 Prefetching/Preloading 的方法也可以，但这些技术似乎对浏览器的支持很差？遗憾的是，我需要对 Safari 的支持。

我的 webpack 配置

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

亲切的问候/K

Answer 1

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

这是您选择的图书馆中关于它的选项：

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

这是我实现的与上面关于 fontawesome 优化相同的技术

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

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

Move fontawesome to own bundle using dynamic import

reactjs

bundle

webpack-4

font-awesome-5