Javascript 如何跨块删除重复的Ant设计组件

问题：常见的antd组件（如Button）被复制到多个块中，而不是被提取到单独的文件中，从而被最终用户多次下载

我正在使用CreateReact应用程序和react应用程序重新布线，并且 注入BabeLPlugin函数以模块化调用Ant设计组件

My config-overrides.js

const { injectBabelPlugin } = require("react-app-rewired")

module.exports = function override(config, env) {
    return injectBabelPlugin(["import", { libraryName: "antd", style: 
    "css" }], config)
}

我把这些组件称为：

import { Row, Col, Button } from "antd"

这些都很好用

我遇到的问题是，在运行webpack bundle analyzer时，我看到常见的antd组件（如Button）在多个块中被复制

我尝试了一些常见的ChunkSplugin配置，但没有效果

---

我的最终目标是将多个块中使用的antd组件加载到它们自己的文件中。使用代码拆分和延迟加载组件可以实现这一点吗？

通常，我会在我的供应商捆绑包中放置一个这样的通用依赖项，它基本上只包括不经常更改的第三方依赖项，因此它们将加载一次并从缓存中提取，直到我更新其中一个供应商依赖项为止。它看起来将与react脚本v2.0.0中的Webpack 4一起升级，但还没有准备好。我不确定现在是否有一种不用弹出就能解决此问题的好方法，但似乎将来会有。

不修改网页的解决方案：

在父组件（或更高的父组件）上，在此处执行完全相同的导入：

import { Row, Col, Button } from "antd"

您也可以使用

React.lazy

在此处导入。我不认为这是必要的，但是你可以把它放在

useffect

中，这样当父组件挂载时，你的应用程序才会读取这些代码

useEffect(() => {
  React.lazy(() => import("antd"))
}, []);

在子组件中，使用与普通组件相同的代码导入以使用变量。Webpack识别此模块已下载，因为父组件仍然存在，因此它不会将它们包含在新的捆绑包中

import { Row, Col, Button } from "antd" 

---

但是，如何在组件内部导入组件/第三方库？我是否仍然需要从antd导入{Button}代码，然后在多个区块/捆绑包中复制代码？当您有一个显式的供应商捆绑包（或从commonChunksPlugin创建的任何东西）时，webpack足够聪明，可以读取导入，并知道如何在公共供应商区块中查找它。您是对的@TLadd，我认为我真正的问题是CommonChunksPlugin似乎没有将这些组件导入从各自的块中拉出。它正在创建一个供应商区块，但这些组件仍然可以跨多个区块复制。你认为这可能是因为我使用webpack的

import

来延迟加载/代码拆分我的容器组件吗？另一个问题似乎与我遇到的问题非常相似，但是他的区块被命名，而我的区块有一个ID和散列，所以我不确定是否可以在区块数组中显式列出它们。修复了区块名称，并尝试了CommonChunksPlugin的“chunks”属性，但这些组件仍然是全面复制的：（感谢编辑Azametzin，我是新来的，所以它很有帮助！