Ant Design 组件的长列表支持方案
简体中文 | English
首页（文档地址）
- 按需加载，与
antd一样的配置 - 样式分离，方便覆盖
- 使用 TypeScript 构建
- 采用 Umi 的组件打包方式
- 现代浏览器和 IE9 及以上。
npm install antd-virtualized --saveyarn add antd-virtualizedimport { Select } from 'antd-virtualized';
ReactDOM.render(<Select />, mountNode);引入样式：
import 'antd-virtualized/dist/antdv.css'; // or 'antd-virtualized/dist/antdv.less'参考: antd 的 按需加载组件
如果你在开发环境的控制台看到下面的提示，那么你可能使用了import { Select } from 'antd-virtualized'; 的写法引入了 antd-virtualized 下所有的模块，这会影响应用的网络性能。
You are using a whole package of antd virtualized, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.
可以通过以下的写法来按需加载组件。
import Select from 'antd-virtualized/lib/select';
import 'antd-virtualized/lib/select/style'; // 或者 antd-virtualized/lib/select/style/css 加载 css 文件antd-virtualized/es/select 可以加载 ES 版本的模块，方便进一步 Tree Shake.
如果你使用了 babel，那么可以使用 babel-plugin-import 来进行按需加载，加入这个插件后。你可以仍然这么写：
import { Select } from 'antd-virtualized';由于该项目借用了 antd 的 babel-plugin-import 插件，故配置与 antd 是一样的，
譬如在 create-react-app 中 是通过 react-app-rewired + babel-plugin-import 按需加载 antd (以及 less)) 的
const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
javascriptEnabled: true,
}),
);那么只需要再加上 antd-virtualized 的配置即可， 即
const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
fixBabelImports('antd-virtualized', {
libraryName: 'antd-virtualized',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
javascriptEnabled: true,
}),
);支持，无需额外配置，antd 进行配置即可
支持，无需额外配置，antd 进行配置即可
参考 国际化文档。
$ git clone [email protected]:francecil/antd-virtualized.git
$ cd antd-virtualized
$ npm install
$ npm start打开浏览器访问 http://127.0.0.1:8001 ，自带组件文档。
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent