前言
本文仅适用于Vue-cli@3
在Vue项目中使用Antd时,会引入所有组件、图标、包括一些依赖库,体积庞大对前端性能有一定影响
1.缩减moment
修改 webpack.prod.conf.js ,增加以下代码过滤掉除zh-cn以外的语言包
plugins: [
new webpack.ContextReplacementPlugin(/moment[/\\]locale$/,/zh-cn/),
]
2.按需引入图标
修改 webpack.base.conf.js ,增加以下代码,将antd引用图标指向./src/assets/js/antd-icons.js 中,需要哪些图标就在antd-icons.js中导出
resolve: {
alias: {
'@ant-design/icons/lib/dist$': resolve("./src/assets/js/antd-icons.js")
}
}
antd-icons.js 代码
// 图标分为 filled ou