如何跨块删除重复的 Ant Design 组件

IT技术 javascript reactjs webpack antd
2021-05-18 05:48:28

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

我将 create-react-app 与 react-app-rewired 结合使用，它是 injectBabelPlugin 函数来module化调用 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 组件。这是否可以使用代码拆分和延迟加载组件？

2个回答

通常，我会在我的供应商包中放置一个像这样的公共依赖项，它基本上只包含不经常更改的第 3 方依赖项，因此它们将加载一次并从缓存中提取，直到我更新供应商依赖项之一. 在 react-scripts 的 v2.0.0 升级到 Webpack 4 后，似乎可以使用 CRA 创建供应商包，但还没有准备好。我不确定现在是否有一个很好的方法可以在不弹出的情况下解决这个问题，但似乎将来会有。

不修改webpack的解决方法：

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

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

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

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

在子组件中，使用与正常相同的代码导入以使用变量。Webpack 识别出这个module已经被下载，因为父组件仍然存在，所以它不会将它们包含在新的包中。

import { Row, Col, Button } from "antd"
其它你可能感兴趣的问题
上一篇使用浅渲染测试react-router 下一篇服务器自动关闭并面临“ERR_STREAM_WRITE_AFTER_END”错误以及每次向客户端发送数据