v4 app bundle size bigger than v3

[matthewlein]

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

Reproduction link

http://example.com/reproduction-not-needed

Steps to reproduce

Update an app from v3 to v4

What is expected?

Based on bundlephobia and the documentation, I expected bundle size to go down.

What is actually happening?

Bundle size is up.

Environment	Info
antd	4.0.0-rc.4
React	16.12.0
System	MacOSX
Browser	all

---

The only updates in this build are:

"@ant-design/icons": "4.0.0-rc.0",
"antd": "3.26.8", -> "antd": "4.0.0-rc.4",

Webpack verison: "webpack": "4.41.5"

I tried using babel-plugin-import as well but got the same build size

V3

V4

Parsed sizes are up ~300k, gzipped ~60k

[matthewlein]

I should clarity—I use have been using babel-plugin-import successfully for v3 builds, I added another section for @ant-design/icons to see if that would help, since that was showing up as larger parsed size in the v4 builds.

    [
      "import",
      {
        "libraryName": "antd",
        "libraryDirectory": "es"
        // "style": true
      },
      "import-antd"
    ],
    [
      "import",
      {
        "libraryName": "@ant-design/icons",
        "libraryDirectory": "es/icons",
        "camel2DashComponentName": false
      },
      "import-antd-icons"
    ],

[faradaytrs]

I should clarity—I use have been using babel-plugin-import successfully for v3 builds, I added another section for @ant-design/icons to see if that would help, since that was showing up as larger parsed size in the v4 builds.

    [
      "import",
      {
        "libraryName": "antd",
        "libraryDirectory": "es"
        // "style": true
      },
      "import-antd"
    ],
    [
      "import",
      {
        "libraryName": "@ant-design/icons",
        "libraryDirectory": "es/icons",
        "camel2DashComponentName": false
      },
      "import-antd-icons"
    ],

you need to remove icons from babel-plugin-import and it will do everything automatically. It worked for me

what's result of source-map-explorer build/static/js/*.js?

[ant-design-bot]

Hello @matthewlein. Please provide a online reproduction by forking this link https://u.ant.design/codesandbox-repro or a minimal GitHub repository. Issues labeled by Need Reproduce will be closed if no activities in 7 days.

你好 @matthewlein, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击 此处 创建一个 codesandbox 或者提供一个最小化的 GitHub 仓库。7 天内未跟进的 issue 将会被自动关闭。

[matthewlein]

@faradaytrs I tried all ways with babel-plugin-import, same as v3, adding icons, removing all. Nothing came out smaller than v3.

Here is a v4 build with no babel-plugin-import at all:

It looks to me like something in the antd library is importing all the icons and not working with tree shaking. The large icon import comes from antd/node_modules
./node_modules/antd/node_modules/@ant-design/icons/es/index.js + 1483 modules (concatenated) (721.82 KB)

v3 icons were 490k

All my icon imports were done by the codemod, all in the format import { CopyOutlined } from '@ant-design/icons'

[faradaytrs]

I use CRA and my config looks like that, it works properly as i expected. I did no add config for icons.

const {override, fixBabelImports, addLessLoader} = require("customize-cra");

module.exports = override(
    fixBabelImports("antd", {
        libraryName: "antd",
        libraryDirectory: "es",
        style: true,
    }),
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: {},
    }),
);

[matthewlein]

rc5 changed an import of AntdIconProps coming from antd's node_modules (and my accidental import from there), and now they bundle differently—how I would have expected, @ant-design/icons is not part of antd any more. 40k smaller, but still large.

[zachguo]

Try my solution: #12011 (comment)

[zachguo]

@matthewlein TBH Your bundle report looks like you are not doing any tree-shaking at all.

[matthewlein]

@zachguo Thanks for taking a look. I already had "libraryDirectory": "es" in my .babelrc, didn't seem to help.

In the past, I have verified that unused parts of antd, like slick were not included. It's possible though, the whole TS -> esnext JS -> Babel + webpack is pretty tough to debug...

[matthewlein]

@zachguo Fixed via another comment in that issue thread. It turned out to be a couple of default imports that didn't come in right

import { Button, Col, DatePicker, Input, Row, Form } from 'antd';
import Checkbox, { CheckboxOptionType } from 'antd/lib/checkbox';

Should have been

import { Button, Col, DatePicker, Input, Row, Form, Checkbox } from 'antd';
import { CheckboxOptionType } from 'antd/lib/checkbox';

2.68mb -> 1.9mb.

Wow, what an amazing difference a few import statements can make.