antd icons 导致bundle体积过大

叁歲伎倆 2022-11-18 04:59 401阅读 0赞

## 问题描述 ##

antd 按需加载引入的，明明只是用了几个icon，然而bundle却多了几百KB

`webpack-bundle-analyzer`效果如下：

![image.png][]

## 解决方案 ##

官方出了个临时的解决方案

> @issue https://github.com/ant-design/ant-design/issues/12011

大概思路是让你自己搞一个icon引入文件，把icon的默认库替换一下

### 1. 创建一个文件`antd-icons.js` ###

/* 列出你自己用到的@ant-design/icons的图标 */
    
    /* 下面是antd默认使用到的icon */
    export {  default as CloseOutline } from '@ant-design/icons/lib/outline/CloseOutline'
    export {  default as CheckOutline } from '@ant-design/icons/lib/outline/CheckOutline'
    export {  default as LoadingOutline } from '@ant-design/icons/lib/outline/LoadingOutline'
    export {  default as CheckCircleOutline } from '@ant-design/icons/lib/outline/CheckCircleOutline'
    export {  default as InfoCircleOutline } from '@ant-design/icons/lib/outline/InfoCircleOutline'
    export {  default as CloseCircleOutline } from '@ant-design/icons/lib/outline/CloseCircleOutline'
    export {  default as ExclamationCircleOutline } from '@ant-design/icons/lib/outline/ExclamationCircleOutline'
    export {  default as CheckCircleFill } from '@ant-design/icons/lib/fill/CheckCircleFill'
    export {  default as InfoCircleFill } from '@ant-design/icons/lib/fill/InfoCircleFill'
    export {  default as CloseCircleFill } from '@ant-design/icons/lib/fill/CloseCircleFill'
    export {  default as ExclamationCircleFill } from '@ant-design/icons/lib/fill/ExclamationCircleFill'
    export {  default as UpOutline } from '@ant-design/icons/lib/outline/UpOutline'
    export {  default as DownOutline } from '@ant-design/icons/lib/outline/DownOutline'
    export {  default as LeftOutline } from '@ant-design/icons/lib/outline/LeftOutline'
    export {  default as RightOutline } from '@ant-design/icons/lib/outline/RightOutline'
    export {  default as RedoOutline } from '@ant-design/icons/lib/outline/RedoOutline'
    export {  default as CalendarOutline } from '@ant-design/icons/lib/outline/CalendarOutline'
    export {  default as SearchOutline } from '@ant-design/icons/lib/outline/SearchOutline'
    export {  default as BarsOutline } from '@ant-design/icons/lib/outline/BarsOutline'
    export {  default as StarFill } from '@ant-design/icons/lib/fill/StarFill'
    export {  default as FilterOutline } from '@ant-design/icons/lib/outline/FilterOutline'
    export {  default as CaretUpOutline } from '@ant-design/icons/lib/outline/CaretUpOutline'
    export {  default as CaretDownOutline } from '@ant-design/icons/lib/outline/CaretDownOutline'
    export {  default as PlusOutline } from '@ant-design/icons/lib/outline/PlusOutline'
    export {  default as FileOutline } from '@ant-design/icons/lib/outline/FileOutline'
    export {  default as FolderOpenOutline } from '@ant-design/icons/lib/outline/FolderOpenOutline'
    export {  default as FolderOutline } from '@ant-design/icons/lib/outline/FolderOutline'
    export {  default as PaperClipOutline } from '@ant-design/icons/lib/outline/PaperClipOutline'
    export {  default as PictureOutline } from '@ant-design/icons/lib/outline/PictureOutline'
    export {  default as EyeOutline } from '@ant-design/icons/lib/outline/EyeOutline'
    export {  default as DeleteOutline } from '@ant-design/icons/lib/outline/DeleteOutline'
    export {  default as UploadOutline } from '@ant-design/icons/lib/outline/UploadOutline'

### 2. 修改webpack配置 ###

alias: {
        '@ant-design/icons/lib/dist$': path.resolve(
          __dirname,
          '../src/antd-icons.js'
        )
    }

[image.png]: /images/20221022/2e79514a957b44d5867f6f48f66e7d22.png