react antd large production bundle

Question

Webpack outputs a very large bundle: 1.5MB minimized.

I import single components according to the docs, using imports 'antd/lib/...'
These are my imports:

import React from "react";
import ReactDOM from "react-dom";

import TreeSelect from 'antd/lib/tree-select';
const TreeNode = TreeSelect.TreeNode;
import 'antd/lib/tree-select/style/css';

import moment from 'moment';
import LocaleProvider from 'antd/lib/locale-provider';

import DatePicker from 'antd/lib/date-picker';
import 'antd/lib/date-picker/style/css'
const { RangePicker } = DatePicker;

import Menu from 'antd/lib/menu';
import 'antd/lib/menu/style/css'

import Dropdown from 'antd/lib/dropdown';
import 'antd/lib/dropdown/style/css';

import Modal from 'antd/lib/modal';
import 'antd/lib/modal/style/css';

import './styles.css';

I'm using just 5 components. Does it make sense the bundle size is that big? My own code is fairly small - around 15KB without minification.

UPDATE: After using IgnorePlugin() for moment, my bundle size got 300KB smaller. Still 1.5MB is very big.

Bellow is webpack config files.

webpack.config.js:

  const config = {
        entry: {
            main: path.resolve(SRC_DIR, "index.js"),
        },
        mode: 'development',
        devtool: 'cheap-eval-source-map',
        output: {
            path: DIST_DIR,
            filename: "bundle.js",
            publicPath: "/static/bundles/",
        },
        resolve: {
            extensions: [".js", ".json", ".css"]
        },
        module: {
            rules: [
                {
                    test: /\.js?/,
                    include: SRC_DIR,
                    loader: "babel-loader",
                    options: {
                        babelrc: true
                    }
                },
                {
                    test: /\.css$/,
                    use: [
                        "style-loader", "css-loader"
                    ]
                }
            ]
        },
      plugins: [
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin(),
        //new webpack.LoaderOptionsPlugin({ debug: true}),
      ]
    };

    module.exports = config;

webpack.prod.js (used to make the bundle):

const common = require('./webpack.config.js');
   module.exports = Object.assign(common, {
        entry: {
            main: path.resolve(SRC_DIR, "index.js"),
        },
        mode: 'production',
        devtool: false,
        output: {
            publicPath: '/static/dist/',
            path: DIST_DIR,
            filename: 'bundle.js'
        },
        plugins: [
            new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
            new BundleAnalyzerPlugin()
        ]
    });

Hi, `moment` is huge, if you can you might want to consider using another date lib like `date-fns`https://date-fns.org/ You can also lazy load your components — t3__rry, Sep 18 '18 at 10:26
It is not the first question on SO about large output bundle when using antd. Some of the components like RangePicker can also use moment lib, so it can become quite heavy — Roman Haivaronski, Sep 18 '18 at 11:17
The problem is that antd DatePicker, like many other datepicker components, depends on moment.js. Second, moment is around 65KB minified. Not very small, but not huge — user3599803, Sep 18 '18 at 11:17
are you sure you are minifiying? i can't see any minification plugin used? you can use uglifyjs plugin — Aseem Upadhyay, Sep 18 '18 at 12:12
@AseemUpadhyay that plugin is used by default when using `mode: production` — PlayMa256, Sep 18 '18 at 12:41

Roman Haivaronski · Answer 1 · 2018-09-18T13:09:43.110

1

Some of the components of Antd date Time functionality like RangePicker also use moment.js lib, so it can become quite heavy.

UPD:

try to optimize it using plugins:

new webpack.optimize.UglifyJsPlugin({
  compress: {
    warnings: false,
    screw_ie8: true,
    conditionals: true,
    unused: true,
    comparisons: true,
    sequences: true,
    dead_code: true,
    evaluate: true,
    if_return: true,
    join_vars: true,
  },
  comments: false,
  sourceMap: true,
  minimize: true,
  exclude: [/\.min\.js$/gi],
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.optimize.ModuleConcatenationPlugin(),

edited Sep 18 '18 at 13:09

answered Sep 18 '18 at 11:19

Roman Haivaronski

530
2
5
18

1

and how he decreases the size of that bundle? Please, complete your answer. – PlayMa256 Sep 18 '18 at 12:42
Can you explain how it works? And I'm getting an error `"webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead."` – user3599803 Sep 20 '18 at 06:47
@user3599803 Webpack uses a series of optimization plugins just look over them. When it comes to minimization you can also use different minifiers but uglify.js is the most common one. Don't know why they have removed it from webpack, here is the solution for it. https://stackoverflow.com/a/34018909/10098471 – Roman Haivaronski Sep 20 '18 at 15:02

Arthur Costa · Answer 2 · 2020-03-25T00:33:13.767

UPDATE

Antd 4 is out! It solves the SVG icon problem and it's 228kb smaller than the 3.x version. Updating to version 4.0.X is gonna bring a massive reduction in our bundle size.

OLD ANSWER

At the moment, a huge part of antd dist is svg icons. 16.3% to be exact (current version).

I believe we don't have any officials ways to deal with icons already, but a workaround exists. You can find it here.

Thus, if you remove this and moment locale you can reduce the lib size about 20%.

They are working on reducing the lib size in the antd 4 for, which it's already on alpha (with already less 130kb minified).

react antd large production bundle

2 Answers2