Antd 2.7 mb budle size when i use only 3 components

Question

So i decided to use react, and antd on top of it. thought would be kinda cool. I am packing everything with webpack and my bundle size is about 2.8 megabytes Carl!

Even if i import a tiny checkbox from antd it is still the same bundle size. It imports whole antd in to a project. my assumption is that it shouldn't do it.

i used babel-import-plugin and it did reduce bundle size to 2.3 megabytes but in real world it is still not acceptable.

import React from 'react';
import ReactDOM from 'react-dom';
import {Checkbox} from 'antd';
import 'antd/dist/antd.less';

class HelloWorld extends React.Component{
    render(){
        return (
            <h1>Hello React</h1>
        )
    }
}

function trig(){
    console.log("Changed");
}

ReactDOM.render(<Checkbox onChange={trig}>Click Me</Checkbox>, document.getElementById("app"));

So just to make this it takes 2.3 megabytes of code ?

.babelrc

{
    "plugins": [
        ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true }]
        // `style: true` for less
      ]
  }

Update, With no antd my react bundle is only 118kb

Check this question: https://stackoverflow.com/questions/48721290/ant-design-huge-imports — Daydreaming Duck, Aug 08 '19 at 10:04
2nd guess: antd is huge, but not SO huge. Are you sure you turned on minification? — Daydreaming Duck, Aug 08 '19 at 10:08
@DaydreamingDuck i tried the methods in that post already, have the plugin installed but it still includes the whole thing. Second, yes i have minimization on. — Anton Stafeyev, Aug 08 '19 at 10:14

score 4 · Answer 1 · edited Aug 08 '19 at 14:18

Good news is that you don't need any plugins or complicated webpack plugins / loaders / magic. All you have to do is to import directly from components folder!

so instead of doing this

import Checkbox from 'antd';

Or

import { Checkbox } from 'antd';

You had to specify a single component location!

import Checkbox from 'antd/es/checkbox';

Few things to note here, to further shrink that down you need the following things:

1) Use babel plugin called 'import' it helps a lot. npm install babel-plugin-import

2) Use webpack optimization! optimization: {minimize: true}

So now Carl instead of having 2.8 megabytes sitting in your bundle, you have only 221kb for your users to download. and remember to use compression when you serve your bundles.

Antd 2.7 mb budle size when i use only 3 components

1 Answers1