如何从 Webpack 4 React 项目中编写拆分包 (fontawesome)

Question

我有一个大包需要分成几个块才能低于 2MB PWA 限制。从 BundleAnalyzerPlugin 中，我可以看到尝试将 lodash、fontawsome 和 moment 拆分到单独的 chunks/bundle 文件中会受益。

我曾尝试使用 import() 拆分技术 described here 但看不出如何使其适用于 Fontawesome。

下面的例子不起作用，因为它仍然在包中留下 fontawesome 并且只在与之交互时加载图标。

import { faBell, faEyeSlash, faEye} from '@fortawesome/free-solid-svg-icons';
import { faBell as regularBell} from '@fortawesome/free-regular-svg-icons';
import('@fortawesome/fontawesome-svg-core').then(fontawesome => {
  fontawesome.library.add(
    faBell, faEye, faEyeSlash, regularBell
  )
})

将 lodash、fontawesome 和 moment 等包分离到单独的包中的正确技术是什么？

亲切的问候/K

Answer 1

我不知道你到底想想出什么，但我假设你想要一个更小的包大小然后我为你做了一个研究：

如果你真的想把你的包大小降到最低，那么寻找 gzip 压缩

https://webpack.js.org/plugins/compression-webpack-plugin/

稍微研究一下就会发现： https://webpack.js.org/guides/code-splitting/

What is the correct technique for separating packages such as lodash, fontawesome and moment into separate bundles?

对于 lodash：

// You should be using:
import isEmpty from 'lodash/isEmpty'

// instead of:
import _ from 'lodash';
import { isEmpty } from 'lodash';

阅读：https://www.blazemeter.com/blog/the-correct-way-to-import-lodash-libraries-a-benchmark/

暂时： https://medium.com/@Memija/less-is-more-with-moment-and-moment-timezone-d7afbab34df3

对于 fontawesome：不知道到底是这个？

The below example does not work, since it still leaves fontawesome in the bundle and only loads icons when interacted with.

是的，它当然会包含在捆绑包中，具体取决于您在配置中声明的内容？您所做的来自文档本身： https://fontawesome.com/how-to-use/with-the-api/other/tree-shaking

Answer 2

为了让 tree-shaking 与 webpack 中的 font-awesome react 包一起工作，我需要像这样直接从子文件夹导入图标：

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

我正在使用 webpack v4 和 fontawesome v5。

如何从 Webpack 4 React 项目中编写拆分包 (fontawesome)

How to code split packages (fontawesome) from Webpack 4 React project

bundle

reactjs

code-splitting

webpack-4