Ant Design 组件的长列表支持方案
简体中文 | English
首页(文档地址)
- 按需加载,与
antd
一样的配置 - 样式分离,方便覆盖
- 使用 TypeScript 构建
- 采用 Umi 的组件打包方式
- 现代浏览器和 IE9 及以上。
npm install antd-virtualized --save
yarn add antd-virtualized
import { 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