使用 ant-design vanilla js 和简单的图标包

发布于 2025-01-13 01:13:50 字数 935 浏览 1 评论 0原文

我正在为我的 vanilla js 应用程序使用 ant-design 和简单的图标。在构建我的应用程序后,我面临着巨大的进口。目前缩小版本为 3.92mb。有什么我可以解决这个问题吗?我正在使用 Parcel 来构建我的网站。

构建:

构建

Package.json

Package

看来ant-design和simple icon导入了index.js中的所有图标index.js

<

a href="https://i.sstatic.net/CgYwQ.png" rel="nofollow noreferrer">输入图像描述这里

在此处输入图像描述

这是我导入图标的方式:

<图像src="https://i.sstatic.net/GEX6S.png" alt="在此处输入图像描述">

I'm using the ant-design and simple icons for my vanilla js app. I'm facing with huge imports after I build my app. Currently 3.92mb in minified version. Is there anything I can fix this? I'm using parcel to build my website.

Build:

Build

Package.json

Package

It seems that ant-design and simple icons imports all the icons in the index.js

index.js

enter image description here

enter image description here

This is how I imports the icons:

enter image description here

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

末が日狂欢 2025-01-20 01:13:50

您可以通过将 --reporter @parcel/reporter-bundle-analyzer 添加到 parcel build 命令来告诉 Parcel 生成对包中内容的分析,该命令将输出将分析结果保存到 parcel-bundle-reports 文件夹中的 html 文件(请参阅 文档)。该分析至少会告诉您捆绑包大小的主要贡献者是什么。

Parcel 确实尝试通过范围提升和树摇动从包中删除未使用的代码(请参阅文档),但是有些事情可能会扰乱这个过程。通过将 --log-level verbose 标志添加到 parcel build 命令中,您可以获取有关 Parcel 是否以及为何出现问题的更多信息。

You can tell parcel generate an analysis of what is in your bundle by adding --reporter @parcel/reporter-bundle-analyzer to your parcel build command, which will output an html file with the analysis to the parcel-bundle-reports folder (see docs). That analysis will at least tell you what is the main contributor(s) to the bundle size are.

Parcel does try to remove unused code from your bundle through scope hoisting and tree-shaking (see docs), but there are things that can mess up this process. You can get additional information about whether and why parcel might have had trouble here by adding the --log-level verbose flag to your parcel build command.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文