如何减小FontAwesome 5.3.1的大小 [英] How to reduce the size of FontAwesome 5.3.1
问题描述
在JavaScript中使用SVG
比在 CSS中使用Web字体
大20倍.
如果我使用将SVG与JavaScript结合使用
,而不计算其他js,jquery,bootstrap,这将是一个大问题.仅加载FontAwesome 5几乎用完了1MB.
This is a big problem if I use Using SVG with JavaScript
, not counting other js, jquery, bootstrap. Loading only FontAwesome 5 almost used 1MB.
任何人都知道如何减小文件大小吗?
Anyone know how to reduce the file size ?
推荐答案
您可能不需要全部Font-Awesome.不要全部加载.仅选择所需的图标,并将其分别加载为< img src ='path'>
,其中路径指向从
You probably don't need all of Font-Awesome. Don't load all of it. Choose only the icons you need, and load them individually as <img src='path'>
where path points to an .svg
file you download from here. If you're fancy, you could combine all of these images into a spritesheet like Google does [google.com spritesheet].
如果您只是为了支持Font Awesome而坚持加载所有这些资产,则gzip压缩文本资产(html,js,css)将极大地减小文件大小.有很多关于如何gzip并将资产上传到静态文件服务器的教程
If you insist on loading all of these assets just to support Font Awesome, gzipping your text assets (html, js, css) will greatly reduce file size. There are lots of tutorials on how to gzip and upload assets to a static file server example.
您可能还希望将JS文件合并为一个文件,以最大程度地减少网络流量.为此,您需要某种构建系统",例如汇总或
You may also wish to combine your JS files into a single file to minimize network traffic. For this you'd want some kind of "build system" like rollup or webpack.
如果您真的想调整性能,请查看甚至更快的网站,这两本非凡的O'REILLY图书都可以帮助您提高内容交付的性能.
If you really want to tune performance, check out High Performance Websites and Even Faster Websites, both phenomenal O'REILLY books that can help you increase performance of content delivery.
这篇关于如何减小FontAwesome 5.3.1的大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!