7 mins read ‧ 2022/07/18 普

Font Awesome 引入優化

前言

前陣子意外發現 Font-Awesome Pro 的 all.min.js 高達 10MB

什麼是 Font-Awesome？

Font Awesome 是一個提供非常多種類 icon 給開發人員的解決方案，可以被整合到許多現代的開發工具，例如前端框架

Font-Awesome 的引入方式

仔細讀了一下 Fone Awesome 官方文件後，發現
Font Awesome 也分很多種形式引入

分成 webfont 與 svg

一般情況使用只需要使用 webfont 就好

除非你要用 javascript 做一些額外的操作，不然應該可以不用 svg

結論

修改前：網頁載入12秒

原本我自身套件引用 Font Awesome 的方式，會把 webfont 以及 svg 都引用，導致網頁加載時會載入 all.min.js 這隻 10MB 的超重怪物 js

function yc_equene(){

    //引入 Font Awesome css
    wp_enqueue_style('fontawesome_css', get_stylesheet_directory_uri() . '/assets/fontawesome-pro-6/css/all.min.css');

    //引入 Font Awesome js  ( svg 方式使用 js )
    wp_enqueue_script('fontawesome_js', get_stylesheet_directory_uri() . '/assets/fontawesome-pro-6/js/all.min.js');

}
add_action('wp_enqueue_scripts', 'yc_equene');

修改後：網頁載入3秒

預設僅開啟 webfont ，除非有額外設定，否則不引用 all.min.js 了

function yc_equene(){

    //引入 Font Awesome css ( webfont 方式使用 css )
    wp_enqueue_style('fontawesome_css', get_stylesheet_directory_uri() . '/assets/fontawesome-pro-6/css/all.min.css');

    //下方是使用 svg 才會用到，整段刪除就好
    //引入 Font Awesome js ( svg 方式使用 js )
    wp_enqueue_script('fontawesome_js', get_stylesheet_directory_uri() . '/assets/fontawesome-pro-6/js/all.min.js');

}
add_action('wp_enqueue_scripts', 'yc_equene');