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

Question

我有一个很大的包，需要分成几个块才能低于2MB的PWA限制。从BundleAnalyzerPlugin中我可以看到，尝试将目录、方格和瞬间分割成单独的块/包文件会使我受益。

​

我尝试过使用import()拆分技术在此描述，但无法了解如何使其在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
  )
})

什么是正确的技术，把包，如寄存，火锅和瞬间分开成不同的捆绑？

亲切问候/K

Answer 1

我不知道你到底在想些什么，但我假设你想要一个较低的包裹尺寸，然后我为你做了一项研究：

如果您真的想将您的包大小推到最低，那么请查找gzip压缩。

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

稍作研究，你就会发现：https://webpack.js.org/guides/code-splitting/

什么是正确的技术，把包，如寄存，火锅和瞬间分开成不同的捆绑？

供住宿之用：

// 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

我不知道这到底是什么？

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

是的，当然，它将包含在包中，这取决于您在配置中声明了什么？您所做的是从文档本身：https://fontawesome.com/how-to-use/with-the-api/other/tree-shaking

Answer 2

为了使用webpack中的字体-令人敬畏的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和火锅v5上。