How to reduce bundle size of antdesign.less file?

Viewed 2634

I have added antd.less file to my react project like this:

import React from 'react';
import ReactDOM from 'react-dom';
import 'regenerator-runtime/runtime.js';
import App from './App';
import 'antd/dist/antd.less';

ReactDOM.render(<App  />, document.getElementById('root'));

module.hot.accept();

How can I reduce the size of this file, it is 1,24MB ? When I import the antd.min.css file I'm not able to use the theme variables annymor configured in my module rules in webpack like this:

 {
        test: /\.less$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'less-loader',
            options: {
              javascriptEnabled: true,
              modifyVars: {
                'primary-color': colors.brandBlue,
                'input-border-color': '#D9D9D9',
                'input-placeholder-color': colors.gray6,
                'input-height-base': '40px',
                'border-radius-base': '2px',
                'btn-height-base': '40px',
                'text-color': colors.gray8,
                'btn-primary-bg': colors.brandOrange,
                'btn-primary-color': colors.white,
                'btn-primary-border': colors.brandOrange,
              },
            },
          },
        ],
      },

enter image description here

1 Answers

I am not sure what's going on with AntD version 4 docs, because the current "Use with Create React App" page no longer shows you how to load the CSS in a modularized way.

If you back up to the v3 docs you get the instructions on how to load the less-processed file but only for the components you actually use, by means of the babel-plugin-import module.

We are using this setup without issues for AntD v4.

As a side note (since you are concerned about bundle size) you can also replace the rather large moment bundle with dayjs: https://ant.design/docs/react/replace-moment

Related