如何减小 FontAwesome 5.3.1 的大小

Question

Using SVG with JavaScript比 大 20 倍Using Web Fonts with CSS。

如果我使用Using SVG with JavaScript，这是一个大问题，不包括其他 js、jquery、bootstrap。只加载 FontAwesome 5 几乎用了 1MB。

有人知道如何减小文件大小吗？

Answer 1

您可能不需要所有的 Font-Awesome。不要全部加载。仅选择您需要的图标，并单独加载它们作为<img src='path'>路径指向.svg您从此处下载的文件的位置。如果您喜欢，您可以将所有这些图像组合成一个spritesheet，就像谷歌所做的 [ google.com spritesheet ]。

如果你坚持加载所有这些资源只是为了支持 Font Awesome，压缩你的文本资源（html、js、css）将大大减少文件大小。有很多关于如何 gzip 和上传资产到静态文件服务器示例的教程。

您可能还希望将您的 JS 文件合并到一个文件中以最小化网络流量。为此，您需要某种“构建系统”，例如rollup或webpack。

如果您真的想调整性能，请查看High Performance Websites和Even Faster Websites，这两本非凡的 O'REILLY 书籍都可以帮助您提高内容交付的性能。