antd在项目中优化问题？求解

Question

上个图：

如图，这是个后台项目，几乎每个页面都用到了antd的Table组件，而项目中使用了babel-import-plugin让antd组件按需使用。 但每个页面都会单独引用Table，而且Table组件不算小，这让我觉得很难受。

有没有办法把Table单独提出来使用？

Answer 1

问题已经解决了。
其实非常简单，静态import是会在runtime之前吧资源加载进来，那么只要克服这点就能可以解决问题。

我使用的是async-loadable或者react-loadable来动态加载Table，webpack会将Table单独切出来加载。

本人这样做的目的是因为每个页面都有Table，而且Table比较大。

代码：

import loadable from 'async-loadable';

const Table = loadable({
  component: () => import('antd/lib/table')
});

render() {
    const { loading, dataSource, pageData } = store;
    return (
      <Table
        loading={loading}
        columns={this.columns}
        locale={{ emptyText: '暂无数据' }}
        dataSource={toJS(dataSource)}
        rowKey={'id'}
        pagination={{
          ...pageData,
          showSizeChanger: false
        }}
        onChange={store.handlePageChange}
      />
    );
  }

前后单个页面大小对比：
修改之前：

修改之后：

爽歪歪