Vue和Nuxt配置antdV的图标的按需引入

在使用antdV的时候，我发现就算配置了组件的按需引入，打包之后包还是很大，然后查阅资料发现是图标文件的问题，把图标的按需引入也配置好，打包的结果能缩小接近一半的大小

前提记得安装好webpack和webpack-cli，作者记录这篇文章的时候，建议使用webpack4.x的版本，5.x的版本会出问题

Vue：

1.在vue.config.js里面配置以下内容：

const path = require('path')

module.exports = {
    configureWebpack: {
        resolve: {
            alias: {
                '@ant-design/icons/lib/dist': path.resolve(__dirname, 'src/antdIcon.js'
            )
        }
    }
}

2.src目录下添加antdIcon.js用于添加需要的图标

import CloseOutline from '@ant-design/icons/lib/outline/CloseOutline' // 导入需要的图标

export {
    CloseOutline // 导出图标
}

Nuxt：Nuxt的配值和Vue没有太大的区别，需要注意的是，nuxt的需要在nuxt.config.js的build里面的extend配置：

extend (config, ctx) {  
    config.resolve.alias['@ant-design/icons/lib/dist$'] = path.resolve(__dirname, 'plugins/antdIcons.js')  
}