解决使用Antd打包时icons文件全部引入问题

西瓜弟弟 2020/2/20 11:53:33

发现问题

今天像往常一样打包更新完文件后准备更新我的博客时,发现打完包之后的首页文件特别大,仔细想想首页也没用到多少模块,肯定是有些不应该打包的东西也打进去了。于是用了 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

随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[解决使用Antd打包时icons文件全部引入问题]http://www.zyiz.net/tech/detail-107997.html

上一篇:call, apply, bind 区别及原理

下一篇:低功耗蓝牙ATT/GATT/Profile/Service/Characteristic规格解读

赞(0)

共有 条评论 网友评论

验证码: 看不清楚?
    关注微信小程序
    程序员编程王-随时随地学编程

    扫描二维码或查找【程序员编程王】

    可以随时随地学编程啦!

    技术文章导航 更多>
    扫一扫关注最新编程教程