0

上个图:
图片描述

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

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

alwaysVe 1.5k
2019-03-05 提问
1 个回答
0

已采纳

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

我使用的是async-loadable或者react-loadable来动态加载Tablewebpack会将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}
      />
    );
  }

前后单个页面大小对比:
修改之前:
图片描述

修改之后:
图片描述

爽歪歪

撰写答案

推广链接