解決使用Antd打包時icons文件所有引入問題

發現問題

今天像往常同樣打包更新完文件後準備更新個人博客時，發現打完包以後的首頁文件特別大，仔細想一想首頁也沒用到多少模塊，確定是有些不該該打包的東西也打進去了。因而用了 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也一併導出。

官方關於這個問題的issues

antd#12011