Code duplication - ant components are duplicated across multiple bundles and not extracted into a vendor bundle.

[schester44]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.3.3

Environment

OSX, Chrome

Reproduction link

https://i.imgur.com/brKcdWk.png

Steps to reproduce

• create-react-app
• react-app-rewired

What is expected?

common components should be extracted to a separate vendor file instead of being included in multiple bundle files.

What is actually happening?

Code duplication across multiple bundles when code-splitting with webpack

Using create-react-app, react-app-rewired, and babel-plugin-import to call components like:

import { Button } from "antd"

This works great in development however when analyzing the bundle I am seeing that the antd components are being duplicated across multiple bundles. Is this expected behavior and what steps need to be taken to prevent this duplication?

My ideal end goal would be to have these commonly used components in some sort of 'vendor' bundle to prevent the same code from being downloaded more than once.

Here is a link to the analyzer photo: https://i.imgur.com/brKcdWk.png

my config-overrides:

const { injectBabelPlugin } = require("react-app-rewired")
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin

module.exports = function override(config, env) {
	config = injectBabelPlugin(["import", { libraryName: "antd", style: "css" }], config)
	return config
}

[yesmeck]

The photo helps little, and I think it's usage question of webpack than an issue of antd. If you can provide a minimal reproduction repo and ensure it's an issue of antd, let me know and I'll reopen this issue, thanks.

[bf]

Same issue happens to me. I tried using style: "css" and style: true but full antd gets included into the chunks. @schester44 have you been successful in resolving this?

[schester44]

I wish. I've spent hours playing with CommonsChunkPlugin config options and what not. I still haven't figured it out. A little help from the ant.design team would be awesome!

[schester44]

@bf

this seems to have worked:

  new webpack.optimize.CommonsChunkPlugin({
    async: "router-commons",
    children: true,
    deepChildren: true,
    minChunks: 3
  }),