Feature: Load Antd components lazily, with Dynamic Imports

[KrishnaPG]

Description

Currently antd components are being loaded statically. This increases the bundle size and initial load time. Since not all components are needed at the start, please load all AntD React components dynamically.

Lazy loading the components will avoid loading unused components. For example, if user registers their own components for, say table, then their components will be loaded (and the in-built table will never be loaded).

Solution

Please use something like below:

const Button = React.lazy(() => import(/* webpackChunkName: "sula-antd" */ 'antd/lib/button/button'));
const Col = React.lazy(() => import(/* webpackChunkName: "sula-antd" */ 'antd/lib/grid/col'));
const Form = React.lazy(() => import(/* webpackChunkName: "sula-antd" */ 'antd/lib/form/Form'));
const FormItem = React.lazy(() => import(/* webpackChunkName: "sula-antd" */ 'antd/lib/form/FormItem'));
const Input = React.lazy(() => import(/* webpackChunkName: "sula-antd" */ 'antd/lib/input/Input'));
const InputPassword = React.lazy(() => import(/* webpackChunkName: "sula-antd" */ 'antd/lib/input/Password'));
const Message = React.lazy(() => import(/* webpackChunkName: "sula-antd" */ 'antd/lib/message/index'));
const Row = React.lazy(() => import(/* webpackChunkName: "sula-antd" */ 'antd/lib/grid/row'));
const Spin = React.lazy(() => import(/* webpackChunkName: "sula-antd" */ 'antd/lib/spin/index'));

[Jhoni-Silva]

Works for me with button, but i'm trying to import Select with no success from 'antd/lib/select/index'