@ant-design/icons-vue按需引入icon

正常引入icon组件库

import * as Icons from '@ant-design/icons-vue'
// 循环使用全部全部图标
const icons: any = Icons
for (const i in icons) {
  // 全局注册一下组件
  app.component(i, icons[i])
}

此时打包npm run build

icons组件占用的资源很多，但是我们用到的icon不多，怎样做到按需加载呢下面通过vue.config.js配置解决这个问题

重点

是下面配置，这里的意思是读取@ant-design/icons-vue组件路径改成了resolve('./src/assets/antd/icons.js')；通过读取这个文件中的icons减少不必要的icons组件打包时占用空间
vue.config.js中配置
configureWebpack

 config.resolve = {
      alias: {
        '@': resolve('src'),
        // 按需加载icons
        '@ant-design/icons-vue$': resolve('./src/assets/antd/icons.js')
      }
    }

icons.js
用到的icon直接添加即可

export {
  default as LogoutOutlined
} from '@ant-design/icons-vue/lib/icons/LogoutOutlined'
export {
  default as HomeOutlined
} from '@ant-design/icons-vue/lib/icons/HomeOutlined'

然后再次执行npm run build结果icons组件库就没有了，说明已经替换掉了

再看下页面icon是否正常显示，如果正常显示说明配置成功了

注意：正常显示的话，执行npm run buildicons组件包还在说明没有配置成功哦