『踩坑记录』 解决Nuxt.js 打包后 Ant Design 的 dist.js 图标文件过大的问题

参考

「踩坑记录」 Nuxt.js & Ant Design Vue 配置
https://www.jianshu.com/p/ca335eaa50cb

nuxt按需引入组件库（却加载所有图标问题），nuxt性能优化。
https://www.cnblogs.com/kaijiangyugty/p/14344499.html

解决antd icon打包过大的问题
https://segmentfault.com/a/1190000019377791

ant design vue 打包瘦身（1） icon太大
https://www.yht7.com/news/87481

HeskeyBaozi/reduce-antd-icons-bundle-demo
https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo

如果也遇到了同样的问题进行搜索的话，肯定会遇到这些答案，我把其中有帮助的整理出来，这些参考很有用，但是仅根据上面的文章还是不能解决问题的（在我的项目是这样子的）。如果打不开了，联系我有镜像

前言

在最近的Nuxt项目中遇到这么一个问题，打包后的antd中的图标过大，导致用户首次打开体验极差，在网上找了一圈都没有完美解决的方法，结合参考，目前以下配置可以解决该问题

前后对比

Before	After
Before	After

图片来源，对比的是 @ant-design > icons > lib > dist.js 文件

版本

nuxt：v2.14.12

ant-design-vue：v1.7.2

webpack：v5.23.0

步骤

./plugins 目录下新建 antd-icon.js

export {default as DownOutline} from '@ant-design/icons/lib/outline/DownOutline';
export {default as CheckCircleFill} from '@ant-design/icons/lib/fill/CheckCircleFill';
export {default as ExclamationCircleFill} from '@ant-design/icons/lib/fill/ExclamationCircleFill';

根据自己的需要，引入图标，图标名称可以在 antd 官网找到，去掉 - 后首字母大写，线框图标结尾是 Outline ，注意路径中也要修改成 outline 。实底图标结尾是 Fill ，同理路径也要修改

修改 nuxt.config.js 文件

import path from 'path'; // 这步一定要，否则会报错

export default {
// ...其他的配置
build: {
        extend(config, ctx) {
            config.resolve.alias['@ant-design/icons/lib/dist$'] = path.resolve(__dirname, './plugins/antd-icon.js') // 引入需要的
            config.resolve.alias['@'] = path.resolve(__dirname, '../plugins')
        }
    }
}

打包，成功！