我正在为我的 React 应用程序使用ant 设计库。
而且我面临着巨大的进口，这伤害了我的包（由于 ant-design lib，目前在缩小版本中为 1.1 mb）。
如何通过我的所有应用程序以不同方式导入 antd 组件？
更新：
似乎antd有一些巨大的或未优化的module。这里的事情 - 唯一的区别是导入 Datepicker module，和..繁荣！+ 近 2MB（在开发包中）
蚂蚁设计 - 大量进口
IT技术
reactjs
antd
2021-05-17 01:13:47
4个回答
UPD：新的 (4.0) 版 antd 似乎解决了潜在问题。
因此，如果您尝试为早期版本解决此问题，推荐的方法是迁移到 antd 4
上一个答案：
目前，antd dist 的很大一部分是 SVG 图标。
目前还没有官方的方法来处理它（检查 github 上的问题）。
但是存在一种解决方法。
- 调整 webpack 以不同方式解析图标。在你的 webpack 配置中：
module.exports = {
//...
resolve: {
alias: {
"@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js")
}
}
};
icons.js在文件夹中src/或任何你想要的地方创建。确保它匹配别名路径！
在这个文件中你定义了 antd 应该包含哪些图标。
export {
default as DownOutline
} from "@ant-design/icons/lib/outline/DownOutline";
也可以使用react-app-rewire（create-react-app 修改）在config-overwrites.js
1) 防止 antd 加载所有时刻本地化。添加 webpack 插件并在 webpack.config.js 中对其进行配置，如下所示：
plugins: [
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /ru/),
],
resolve: {
alias: {moment: `moment/moment.js`}
},
target: `web`
}
2) 使用与antd 库中相同的 moment 版本。
3) 使用module化的 antd 使用 babel-plugin-import
// .babelrc or babel-loader option
{
"plugins": [
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
// `style: true` for less
]
}
我使用BundleAnalyzerPlugin来分析包。
plugins: [new BundleAnalyzerPlugin()]
查看文档 https://ant.design/docs/react/getting-started#Import-on-Demand ，建议按需导入单个组件。所以，你可以尝试更换
import { Button} from 'antd'
和
import Button from 'antd/lib/button'
我通过如下编辑将我的包大小减少了 500KB config-override.js：
配置覆盖.js
const { override, fixBabelImports } = require('customize-cra');
const path = require('path');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css'
}),
// used to minimise bundle size by 500KB
function(config, env) {
const alias = config.resolve.alias || {};
alias['@ant-design/icons/lib/dist$'] = path.resolve(__dirname, './src/icons.js');
config.resolve.alias = alias;
return config;
}
);
./src/icons.js
/**
* List all antd icons you want to use in your source code
*/
export {
default as SearchOutline
} from '@ant-design/icons/lib/outline/SearchOutline';
export {
default as CloseOutline
} from '@ant-design/icons/lib/outline/CloseOutline';
export {
default as QuestionCircleOutline
} from '@ant-design/icons/lib/outline/QuestionCircleOutline';
export {
default as PlayCircleOutline
} from '@ant-design/icons/lib/outline/PlayCircleOutline';
export {
default as PauseCircleOutline
} from '@ant-design/icons/lib/outline/PauseCircleOutline';
export {
default as LoadingOutline
} from '@ant-design/icons/lib/outline/LoadingOutline';
前
后
