如何跨块删除重复的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?

推荐答案

通常，我会在供应商捆绑包中放置一个这样的常见依赖项，该依赖项基本上只包含不会经常更改的第三方依赖项，因此它们将加载一次并从缓存中拉出，直到我更新供应商依赖项之一.看起来使用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屋！