Using SVG with JavaScript比Using Web Fonts with CSS大20倍。如果我使用Using SVG with JavaScript,这是一个大问题,不算其他js,jquery,bootstrap。仅加载FontAwesome 5几乎使用了1MB。有谁知道如何减少文件大小?
Using SVG with JavaScript
Using Web Fonts with CSS
4ioopgfo1#
你可能并不需要Font-Awesome的全部。不要全部加载。只选择你需要的图标,并将它们单独加载为<img src='path'>,其中路径指向你从here下载的.svg文件。如果你喜欢,你可以像Google那样将所有这些图像合并组合成一个spritesheet [google.com spritesheet]。如果你坚持加载所有这些资产只是为了支持Font Awesome,gzip你的文本资产(html,js,css)将 * 大大 * 减少文件大小。有很多教程介绍如何gzip和上传资产到静态文件服务器example。你可能也希望将你的JS文件合并合并到一个文件中,以最小化网络流量。为此,你需要某种“构建系统”,如rollup或webpack。如果你真的想调优性能,请查看High Performance Websites和Even Faster Websites,这两本非凡的O 'REILLY书籍可以帮助你提高内容交付的性能。
<img src='path'>
.svg
vtwuwzda2#
我使用https://fontforge.org删除未使用的字形1.安装(适用于Mac,也适用于大多数平台)brew install fontforge
#!/usr/local/bin/python3import fontforgeimport reimport globimport osimport sysif len(sys.argv) < 3: sys.exit()#https://fontforge.org/docs/scripting/python/fontforge.html#fa-prune.py ./assests/fontawesome './pages/**/*,./components/**/*,./layouts/**/*'#fa-prune.py ./web/fontawesome './public/assets/**/*.js'# Scan webpack assets# rootDir = '/Users/ybb/devel/home/yo/web/fontawesome'# scanPaths = [# '/Users/ybb/devel/home/yo/public/assets/**/*.js'# ]# Scan nuxt source# rootDir = '/Users/ybb/devel/home/cs-web/assets/fontawesome'# scanPaths = [# '/Users/ybb/devel/home/cs-web/pages/**/*',# '/Users/ybb/devel/home/cs-web/components/**/*',# '/Users/ybb/devel/home/cs-web/layouts/**/*'# ]rootDir = os.path.abspath(sys.argv[1])scanPaths = list(map(lambda x: os.path.abspath(x), sys.argv[2].split(',')))# print(rootDir, scanPaths)# sys.exit()inDir = rootDir + '/webfonts'outDir = rootDir + '/webfonts-min'fonts = {'fas': 'fa-solid-900.svg', 'far': 'fa-regular-400.svg'}exts = ['svg', 'ttf', 'woff', 'woff2', 'eot']icons = {}pattern = re.compile("\"(" + '|'.join(list(fonts)) + ")\s(fa-\w[-\w]*)\"")for scanPath in scanPaths: for filename in glob.glob(scanPath, recursive=True): if not os.path.isdir(filename): for line in open(filename): for match in re.finditer(pattern, line): if not match.group(1) in icons: #print(match.group(2)) icons[match.group(1)] = set() icons[match.group(1)].add(match.group(2)[3:])os.makedirs(outDir, exist_ok=True)for font in icons: f = fontforge.open(inDir + '/' + fonts[font]) for icon in icons[font]: f.selection.select(('more', None), icon) for i in f.selection: try: name, width = f[i].glyphname, f[i].width print(font, i, name, width) except: pass f.selection.invert() for i in f.selection.byGlyphs: f.removeGlyph(i) filePath = outDir + '/' + fonts[font].rsplit('.', 1)[0] for ext in exts: f.generate(filePath + '.' + ext) print(filePath + '.' + ext, 'generated') os.remove(filePath + '.afm')
#!/usr/local/bin/python3
import fontforge
import re
import glob
import os
import sys
if len(sys.argv) < 3:
sys.exit()
#https://fontforge.org/docs/scripting/python/fontforge.html
#fa-prune.py ./assests/fontawesome './pages/**/*,./components/**/*,./layouts/**/*'
#fa-prune.py ./web/fontawesome './public/assets/**/*.js'
# Scan webpack assets
# rootDir = '/Users/ybb/devel/home/yo/web/fontawesome'
# scanPaths = [
# '/Users/ybb/devel/home/yo/public/assets/**/*.js'
# ]
# Scan nuxt source
# rootDir = '/Users/ybb/devel/home/cs-web/assets/fontawesome'
# '/Users/ybb/devel/home/cs-web/pages/**/*',
# '/Users/ybb/devel/home/cs-web/components/**/*',
# '/Users/ybb/devel/home/cs-web/layouts/**/*'
rootDir = os.path.abspath(sys.argv[1])
scanPaths = list(map(lambda x: os.path.abspath(x), sys.argv[2].split(',')))
# print(rootDir, scanPaths)
# sys.exit()
inDir = rootDir + '/webfonts'
outDir = rootDir + '/webfonts-min'
fonts = {'fas': 'fa-solid-900.svg', 'far': 'fa-regular-400.svg'}
exts = ['svg', 'ttf', 'woff', 'woff2', 'eot']
icons = {}
pattern = re.compile("\"(" + '|'.join(list(fonts)) + ")\s(fa-\w[-\w]*)\"")
for scanPath in scanPaths:
for filename in glob.glob(scanPath, recursive=True):
if not os.path.isdir(filename):
for line in open(filename):
for match in re.finditer(pattern, line):
if not match.group(1) in icons:
#print(match.group(2))
icons[match.group(1)] = set()
icons[match.group(1)].add(match.group(2)[3:])
os.makedirs(outDir, exist_ok=True)
for font in icons:
f = fontforge.open(inDir + '/' + fonts[font])
for icon in icons[font]:
f.selection.select(('more', None), icon)
for i in f.selection:
try:
name, width = f[i].glyphname, f[i].width
print(font, i, name, width)
except:
pass
f.selection.invert()
for i in f.selection.byGlyphs:
f.removeGlyph(i)
filePath = outDir + '/' + fonts[font].rsplit('.', 1)[0]
for ext in exts:
f.generate(filePath + '.' + ext)
print(filePath + '.' + ext, 'generated')
os.remove(filePath + '.afm')
字符串1.预期输出fa-prune.py./fontawesome '../public/assets/**/*.js'
fas 114 heart 512fas 122 times 352fas 123 search-plus 512fas 190 arrow-left 448fas 355 ellipsis-v 192fas 385 thumbs-up 512fas 386 thumbs-down 512fas 467 venus 288fas 468 mars 384fas 698 level-down-alt 320fas 702 map-marker-alt 384/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-solid-900.svg generated/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-solid-900.ttf generated/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-solid-900.woff generated/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-solid-900.woff2 generated/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-solid-900.eot generatedfar 114 heart 512far 121 check 512far 122 times 320far 125 power-off 512far 127 cog 512far 190 arrow-left 448far 204 eye 576far 206 exclamation-triangle 576far 224 comments 576far 256 link 512far 354 ellipsis-h 512far 428 paper-plane 512far 429 history 512far 520 comment-alt 512far 570 trash-alt 448far 589 images 576far 842 comment-alt-lines 512far 909 user-friends 640/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-regular-400.svg generated/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-regular-400.ttf generated/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-regular-400.woff generated/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-regular-400.woff2 generated/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-regular-400.eot generated
fas 114 heart 512
fas 122 times 352
fas 123 search-plus 512
fas 190 arrow-left 448
fas 355 ellipsis-v 192
fas 385 thumbs-up 512
fas 386 thumbs-down 512
fas 467 venus 288
fas 468 mars 384
fas 698 level-down-alt 320
fas 702 map-marker-alt 384
/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-solid-900.svg generated
/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-solid-900.ttf generated
/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-solid-900.woff generated
/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-solid-900.woff2 generated
/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-solid-900.eot generated
far 114 heart 512
far 121 check 512
far 122 times 320
far 125 power-off 512
far 127 cog 512
far 190 arrow-left 448
far 204 eye 576
far 206 exclamation-triangle 576
far 224 comments 576
far 256 link 512
far 354 ellipsis-h 512
far 428 paper-plane 512
far 429 history 512
far 520 comment-alt 512
far 570 trash-alt 448
far 589 images 576
far 842 comment-alt-lines 512
far 909 user-friends 640
/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-regular-400.svg generated
/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-regular-400.ttf generated
/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-regular-400.woff generated
/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-regular-400.woff2 generated
/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-regular-400.eot generated
型1.设置fontawesome字体路径fonts.scss
$fa-font-path: "../fontawesome/webfonts-min";@import "../fontawesome/scss/solid";@import "../fontawesome/scss/regular";
$fa-font-path: "../fontawesome/webfonts-min";
@import "../fontawesome/scss/solid";
@import "../fontawesome/scss/regular";
型
rsaldnfx3#
您可以查看www.fontcut.com以获取您需要的图标。我们尝试了11个图标(专业版),最终得到的字体文件大小为3k,CSS文件大小为14k。如果您不需要旋转或不同大小的花哨Fontawesome,您可以获得更小的文件。select ions的font files的css file的
3条答案
按热度按时间4ioopgfo1#
你可能并不需要Font-Awesome的全部。不要全部加载。只选择你需要的图标,并将它们单独加载为
<img src='path'>
,其中路径指向你从here下载的.svg
文件。如果你喜欢,你可以像Google那样将所有这些图像合并组合成一个spritesheet [google.com spritesheet]。如果你坚持加载所有这些资产只是为了支持Font Awesome,gzip你的文本资产(html,js,css)将 * 大大 * 减少文件大小。有很多教程介绍如何gzip和上传资产到静态文件服务器example。
你可能也希望将你的JS文件合并合并到一个文件中,以最小化网络流量。为此,你需要某种“构建系统”,如rollup或webpack。
如果你真的想调优性能,请查看High Performance Websites和Even Faster Websites,这两本非凡的O 'REILLY书籍可以帮助你提高内容交付的性能。
vtwuwzda2#
我使用https://fontforge.org删除未使用的字形
1.安装(适用于Mac,也适用于大多数平台)
brew install fontforge
fa-prune.py
字符串
1.预期输出
fa-prune.py./fontawesome '../public/assets/**/*.js'
型
1.设置fontawesome字体路径
fonts.scss
型
rsaldnfx3#
您可以查看www.fontcut.com以获取您需要的图标。我们尝试了11个图标(专业版),最终得到的字体文件大小为3k,CSS文件大小为14k。如果您不需要旋转或不同大小的花哨Fontawesome,您可以获得更小的文件。
select ions的
font files的
css file的