Ant-Design-Vue 瘦身

前言

本文仅适用于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 outline twotone ,可以前往@ant-design/icons/lib中查看

// 例：导出图标 <a-icon