Question

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

我正在使用create-react-app和react-app-rewired一起使用它 injectBabelPlugin函数以模块方式调用Ant Design组件。

我的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）正在多个块之间复制。

我尝试了一些CommonChunksPlugin配置但无济于事。

我的最终目标是在他们自己的文件中加载多个组件中使用的antd组件。这可能是使用代码拆分和延迟加载的组件吗？

Answer 1

通常情况下，我会在我的供应商包中放置一个这样的常见依赖项，它基本上只包含不会经常更改的第三方依赖项，因此它们将加载一次并从缓存中提取，直到我更新其中一个供应商依赖。看起来the ability to create a vendor bundle with CRA将在反应脚本的v2.0.0中升级到Webpack 4，但还没有准备好。我不确定现在是否有一个很好的方法可以解决这个问题而不会弹出，但似乎将来会出现。

Answer 2

无需修改webpack的解决方案：

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

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

您也可以使用React.lazy导入此处。我认为没有必要，但是您可以将其放在useEffect中，这样，只有在安装了父组件时，应用程序才能读取此代码。

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

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

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

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

2 个答案: