如何跨块删除重复的 Ant Design 组件 [英] How to remove duplicate Ant Design components across chunks

问题描述

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

Problem: Common antd components (such as Button) are being duplicated across multiple chunks, instead of being extracted into a separate file, and thus being downloaded more than once by the end user.

我将 create-react-app 与 react-app-rewired 结合使用，它是injectBabelPlugin 函数以模块化调用 Ant Design 组件.

I'm using create-react-app in conjunction with react-app-rewired and it's injectBabelPlugin function to modularly call Ant Design components.

我的 config-overrides.js

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"

这一切都很好，很花哨.

This all works fine and dandy.

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

The issue i'm having is when running webpack-bundle-analyzer, i'm seeing that common antd components (such as Button) are being duplicated across multiple chunks.

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

I've tried some CommonChunksPlugin configurations but to no avail.

我的最终目标是在自己的文件中加载在多个块中使用的 antd 组件.这是否可以使用代码拆分和延迟加载组件?

My end goal is to load antd components, that are used in multiple chunks, in their own file. Is this possible using code splitting and lazy loaded components?

推荐答案

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

Typically, I would put a common dependency like this in my vendor bundle, which basically just includes 3rd-party dependencies that don't change all that often, so they will load once and be pulled from cache until I update one of the vendor dependencies. It looks like the ability to create a vendor bundle with CRA is going to come with the upgrade to Webpack 4 in v2.0.0 of react-scripts, but isn't ready yet. I'm not sure if there's a great way to solve this problem right now without ejecting, but seems like there will be in the future.

这篇关于如何跨块删除重复的 Ant Design 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！