javascript - 如何跨 block 删除重复的 Ant Design 组件

Question

问题:常见的 antd 组件(例如 Button)在多个 block 中重复，而不是提取到单独的文件中，从而被最终用户多次下载。

我将create-react-app与react-app-rewired结合使用，它是insertBabelPlugin 函数来模块化调用 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)在多个 block 中重复。

我尝试了一些 CommonChunksPlugin 配置，但没有成功。

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

Answer 1

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