font-awesome、bootstrap を使用している場合、一部しか使っていない場合でも、Web アイコンフォントの読み込みが行われます。
未使用のフォントを削除するライブラリがないか探したところ、fontmin-webpack - npm を見つけました。

インストール、設定まで実施みたので、結果を記載します。

fontmin 自体の使い方

fontmin 自体の使い方は以下が参考になりました。
フォントファイルから使いたい文字を抜き出してコマンドラインでWebフォント化するfontminが便利だった - Qiita

fontmin には font 含めたい文字列と フォントファイルのファイルパスを指定して使用します。
CSS ファイルを指定して フォントを生成するオプションはなく、fontmin-webpack は CSS内のアイコンのユニコードの文字列を抽出してそれをfontmin の引数に設定して実行しています。

fontmin-webpack を使用する前段階で実施すること

fontmin-webpack は CSS 定義を軸に使用していないフォントファイルを削除します。
事前に未使用のCSS定義を最適化する UnCSS 等で使用している CSS のみを抽出する必要があります。
UnCSS の使い方は以前まとめていますので、よろしければ以下ご確認ください。

インストール、設定

インストール、設定を行います。

  • インストール 

    npm i -D fontmin-webpack

  • webpack.config.js の修正
    survivejs/webpack-merge: Merge designed for Webpack (MIT) を使用している状況で、production の ビルドのみ適用しました。 

    const FontminPlugin = require('fontmin-webpack')

module.exports = Merge(BaseConfig, {
    plugins: [
      new FontminPlugin({
        autodetect: true // automatically pull unicode characters from CSS
      }),
    ],

  • エントリーポイント index.js の実装
    bootstrap.optimized.css、font-awesome.optimized.css は事前に UnCSS で未使用のCSS ファイルを削除したファイルです。
    これで、実際に使用しているフォントのみが抽出されます。 

    import '../css/normalize.css';
import '../css/bootstrap.optimized.css';
import '../css/clean-blog.css';
import '../css/codehilite.css';
import '../css/font-awesome.optimized.css';
import '../css/fonts.css';
import './jquery.js';
import './bootstrap.js';
import './clean-blog.js';

import registerServiceWorker from './registerServiceWorker.js';

registerServiceWorker();

import pageConfigurator from './pageConfigurator.js';

pageConfigurator();

未使用アイコン削除後の font ファイルのサイズ

合計 911.8 KiB が、合計 26.17 KiB になり、 97 % 削減できました。

  • 削除前 

                                                    Asset      Size  Chunks                    Chunk Names
                 1dc35d25e61d819a9c357074014867ab.ttf   149 KiB          [emitted]         
                 25a32416abee198dd821b0b17a198a8f.eot  74.7 KiB          [emitted]         
               448c34a56d699c29117adc64c43affeb.woff2  17.4 KiB          [emitted]         
                 5e173a86206ff17b10b9d500a0a5a64c.svg   335 KiB          [emitted]  [big]  
                 7e2cf4cef159859a7dd1794e5173dd54.svg  91.7 KiB          [emitted]         
                c8ddf1e5e5bf3682bc7bebf30f394148.woff  88.3 KiB          [emitted]         
                 e18bbf611f2a2e43afc071aa2f4e1512.ttf  43.1 KiB          [emitted]         
               e6cf7c6ec7c2d6f670ae9d762604cb0b.woff2    70 KiB          [emitted]         
                 f4769f9bdb7466be65088239c12046d1.eot  19.7 KiB          [emitted]         
                fa2772327f55d8198301fdb8bcfc8158.woff  22.9 KiB          [emitted]

  • 削除後 

                                                    Asset      Size  Chunks             Chunk Names
                 1dc35d25e61d819a9c357074014867ab.ttf  2.85 KiB          [emitted]  
                 25a32416abee198dd821b0b17a198a8f.eot  3.04 KiB          [emitted]  
               448c34a56d699c29117adc64c43affeb.woff2  1.11 KiB          [emitted]  
                 5e173a86206ff17b10b9d500a0a5a64c.svg  3.85 KiB          [emitted]  
                 7e2cf4cef159859a7dd1794e5173dd54.svg  2.69 KiB          [emitted]  
                c8ddf1e5e5bf3682bc7bebf30f394148.woff  2.92 KiB          [emitted]  
                 e18bbf611f2a2e43afc071aa2f4e1512.ttf  2.65 KiB          [emitted]  
               e6cf7c6ec7c2d6f670ae9d762604cb0b.woff2  1.37 KiB          [emitted]  
                 f4769f9bdb7466be65088239c12046d1.eot  2.96 KiB          [emitted]  
                fa2772327f55d8198301fdb8bcfc8158.woff  2.73 KiB          [emitted]

参考

以下、参考にした記事になります。

以上です。

コメント

カテゴリー

最近の投稿