Font Awesome怎么打包js变小,怎么最小化Font Awesome?

Font Awesome 是互联网的图标库和工具包,被数百万设计师、开发人员和内容创建者使用。 当然我们的网站也在使用,但是Font Awesome目前不管是使用css方法或者js方法都是在太大了。那么怎么压缩Font Awesome?怎么打包js变小,怎么最小化Font Awesome?这让人不胫头痛啊。

Font Awesome怎么打包js变小,怎么最小化Font Awesome?插图
Font Awesome怎么打包js变小,怎么最小化Font Awesome?插图1 Font Awesome

提供一个发方法,不使用JS方法全量引入,也不使用CSS方法引入,使用Font Awesome API进行编译即可。

Font Awesome API有个Icon Library功能可以实现,示例:

import { library, dom } from '@fortawesome/fontawesome-svg-core'
import { faLongArrowAltRight, faDatabase } from '@fortawesome/free-solid-svg-icons'
import { faWordpressSimple, faQq} from '@fortawesome/free-brands-svg-icons'
library.add(faLongArrowAltRight, faDatabase, faWordpressSimple, faQq)
dom.watch()

我在自己的项目中引入了30个左右的图标,编译后为70kb左右,如果是网页开启了压缩输出,大概是30kb左右,如果是全量引入编译所有的图标,可是高达1MB+的啊。可想而知这种方法是多么的优秀。

参考文档:

  • https://fontawesome.com/v5/docs/apis/javascript/icon-library
  • https://github.com/FortAwesome/Font-Awesome/wiki/Customize-Font-Awesome

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注