发现问题
今天像往常一样打包更新完文件后准备更新我的博客时，发现打完包之后的首页文件特别大，仔细想想首页也没用到多少模块，肯定是有些不应该打包的东西也打进去了。于是用了 webpack-bundle-analyzer 插件查看打包后的文件的详细情况。
于是发现
文件把整个 @ant-design/icons/lib 都打包进去了, 让文件无缘无故多了500多kb，就算开启gzip后也要145kb。
原来我项目中用到了Antd中的Icon组件，在Icon组件文件中看到
把整个 @ant-design/icons/lib都引入了组件，所以打包时也都Antd所有字体也就打包进了文件。
如何解决
解决办法一
只引入我们需要的Antd中要的Icon文件。
创建antdIcons.js，从@ant-design中导出只是你想要的Icon文件
在安装Antd时，@ant-design/icons 已经作为依赖安装过了，所以不用重新安装。
// antdIcons.js
export {default as MenuOutline} from '@ant-design/icons/lib/outline/MenuOutline';
然后配置webpack的resolve.alias
让解析引入包的地址时，变成解析成你配置的地址
// webpack配置中
resolve: {
alias:{
’@ant-design/icons/lib/dist$': path.resolve(__dirname, 'utils/antdIcon.js')
}
}
配置之后我们在看打包后 webpack-bundle-analyzer 插件的输出
现在只是引入我们需要的icon，现在只占了文件非常小的一部分
解决办法二
不使用Antd的Icon组件，使用阿里iconfont 挑选自己想要的文件在项目中引入iconfont文件。
注意事项
- 配合官方的组件按需加载使用：Antd 按需加载
- 配置webpack的resolve.alias时路径不要写错了
- antdIcons.js引入icon的引入写法不能这么写
// antdIcons.js
export { MenuOutline } from '@ant-design/icons';
这种写法会使webpack4解析时不能进行tree-shaking，最后也会把整个@ant-design/icons打包进去
- 注意Antd的icon有fill和outline的区别，引入时注意检查
- 如果用到了Antd组件中也使用到了Icon组件，需要把这些组件需要用的Icon也一并导出。
