フォントを追加してもパフォーマンスに悪影響はありません。この記事では、Vue アプリケーションでフォントを読み込むためのベスト プラクティスについて説明します。 font-faceでフォントを正しく宣言するフォントが正しく宣言されていることを確認することは、フォントを読み込む際の重要な側面です。これは、font-face プロパティを使用して選択したフォントを宣言することによって行われます。 Vue プロジェクトでは、この宣言はルート CSS ファイルで行うことができます。この質問に入る前に、Vue アプリケーションの構造を見てみましょう。 /根 公共/ フォント/ ロボト/ Roboto-Regular.woff2 Roboto-Regular.woff インデックス.html ソース/ 資産/ メイン.css コンポーネント/ ルーター/ 店/ ビュー/ メイン.js main.css で font-face を次のように宣言することでこれを実行できます。 // src/assets/main.css @フォントフェイス { フォントファミリー: "Roboto"; フォントの太さ: 400; フォントスタイル: 通常; フォント表示: 自動; ユニコード範囲: U+000-5FF; src: ローカル("Roboto"), url("/fonts/Roboto/Roboto-Regular.woff2") フォーマット("woff2"), url("/fonts/Roboto/Roboto-Regular.woff") フォーマット("woff"); } 最初に注目すべきは font-display:auto です。値として auto を使用すると、ブラウザはフォントを表示するために最も適切な戦略を使用します。これは、ネットワーク速度、デバイスの種類、アイドル時間などの要因によって異なります。 フォントの読み込み方法をより細かく制御するには、 font-display: block を使用する必要があります。これは、フォントが完全にダウンロードされるまでブラウザにテキストを一時的に非表示にするように指示します。その他の可能な値は swap、fallback、optional です。詳細については、こちらをご覧ください。 unicode-range: U+000-5FF に注意してください。これは、ブラウザに必要なグリフ範囲 (U+000 - U+5FF) のみを読み込むように指示します。また、ほとんどの最新ブラウザで動作するように最適化された形式である woff および woff2 フォント形式も使用する必要があります。 もう一つ注意すべき点は src の順序です。まず、フォントのローカル コピーが使用可能かどうか ( local("Roboto") ) を確認し、それを使用します。多くの Android デバイスには Roboto がプリインストールされており、この場合はプリインストールされたコピーを使用します。ローカル コピーがない場合は、ブラウザーが woff2 形式をサポートしていれば、そのダウンロードを続行します。それ以外の場合は、サポートされている宣言内の次のフォントにスキップします。 フォントをプリロードするカスタム フォントを宣言したら、<link rel="preload"> を使用して、ブラウザに事前にフォントをプリロードするように指示できます。 public/index.html に以下を追加します。 <リンク rel="プリロード" as="フォント" href="./fonts/Roboto/Roboto-Regular.woff2" タイプ="font/woff2" クロスオリジン="匿名" /> rel="preload" はブラウザにできるだけ早くリソースの取得を開始するように指示し、as="font" はブラウザにこれがフォントであることを伝えてリクエストを優先します。また、crossorigin="anonymous" にも注意してください。この属性がないと、プリロードされたフォントはブラウザによって破棄されます。これは、ブラウザがフォントを匿名で取得するため、この属性を使用すると匿名のリクエストを行うことができるためです。 link=preload を使用すると、カスタム フォントが必要になる前にダウンロードされる可能性が高まります。この小さな調整により、フォントの読み込み時間が大幅に短縮され、Web アプリケーションでのテキストのレンダリングが高速化されます。 フォントをホストするにはlink=preconnectを使用しますGoogle Fonts などのサイトからホストされているフォントを使用する場合、link=preconnect を使用すると読み込み時間が短縮されます。ブラウザにドメイン名への接続を事前に確立するように指示します。 Google Fonts が提供する Roboto フォントを使用している場合は、public/index.html で次の操作を実行できます。 <link rel="preconnect" href="https://fonts.gstatic.com" /> ... <リンク href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="スタイルシート" /> これにより、オリジン https://fonts.gstatic.com への初期接続が確立され、ブラウザーがオリジンからリソースを取得する必要があるときには、接続がすでに確立されています。両者の違いは以下の図で確認できます。 link=preconnect なしでフォントをロードすると、接続にかかる時間 (DNS ルックアップ、初期接続、SSL など) を確認できます。このように link=preconnect を使用すると、結果が大きく異なって見えます。 ここでは、接続がすでに確立されているため、DNS ルックアップ、初期接続、SSL にかかる時間がなくなっていることに気付くでしょう。 サービスワーカーを使用してフォントをキャッシュするフォントはあまり変化しない静的リソースなので、キャッシュに適しています。理想的には、ブラウザがフォントをより長くキャッシュできるように、Web サーバーはフォントの max-age expires ヘッダーをより長く設定する必要があります。プログレッシブ ウェブ アプリ (PWA) を構築する場合は、サービス ワーカーを使用してフォントをキャッシュし、キャッシュから直接提供することができます。 Vue を使用して PWA の構築を開始するには、vue-cli ツールを使用して新しいプロジェクトを生成します。 vue で pwa アプリを作成する [手動で機能を選択する] オプションを選択し、[プログレッシブ Web アプリ (PWA) サポート] を選択します。 PWA テンプレートを生成するために必要なのはこれだけです。完了したら、ディレクトリを pwa-app に変更してアプリを提供できます。 cd pwa アプリ 糸サーブ src ディレクトリに、デフォルトの構成を含む registerServiceWorker ファイルがあることがわかります。プロジェクトのルート ディレクトリに vue.config.js が存在しない場合は作成し、存在する場合は次のコンテンツを追加します。 // vue.config.js モジュール.エクスポート = { 質問: ワークボックスオプション: { スキップ待機: true、 クライアントの主張: true、 }, }, }; vue-cli ツールは PWA プラグインを使用してサービス ワーカーを生成します。内部的には、Workbox を使用して、サービス ワーカーとそれが制御する要素、使用するキャッシュ戦略、およびその他の必要な構成を構成します。 上記のコード スニペットでは、アプリケーションが常に最新バージョンのサービス ワーカーによって制御されるようにしています。これは、ユーザーが常に最新バージョンのアプリケーションを表示できるようにするため必要です。生成されたサービス ワーカーの動作をさらに制御するには、Workbox 構成ドキュメントを確認してください。 次に、カスタム フォントをパブリック ディレクトリに追加します。次のような構造になっています。 根/ 公共/ インデックス.html フォント/ ロボト/ Roboto-Regular.woff Roboto-Regular.woff2 Vue アプリケーションの開発が完了したら、ターミナルから次のコマンドを実行してビルドできます。 糸ビルド これにより、結果が dist フォルダーに出力されます。フォルダーの内容を調べると、precache-manifest.1234567890.js のようなファイルがあることがわかります。キャッシュするアセットのリストが含まれています。これは、リビジョンと URL を含むキーと値のペアのリストにすぎません。 self.__precacheManifest = (self.__precacheManifest || []).concat([ { 「リビジョン」: 「3628b4ee5b153071e725」、 "url": "/fonts/Roboto/Roboto-Regular.woff2" }, ... ]); カスタムフォントを含め、public/ フォルダ内のすべてがデフォルトでキャッシュされます。これを設定すると、service などのパッケージを使用してアプリケーションを提供したり、Web サーバー上で dist フォルダーをホストして結果を表示したりできるようになります。以下にアプリケーションのスクリーンショットを示します。 次回のアクセス時には、フォントがキャッシュから読み込まれるため、アプリケーションの読み込み時間が短縮されます。 結論はこの記事では、Vue アプリケーションでフォントを読み込むときに適用するベスト プラクティスをいくつか紹介しました。これらの方法を使用すると、アプリのパフォーマンスに影響を与えることなく、提供するフォントの見栄えが良くなります。 Vue.js でフォントを読み込む正しい方法についての記事はこれで終わりです。vue.js フォント読み込みに関する関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Docker を使用して Django プロジェクトをデプロイする方法の例
>>: MySQL のインストール方法と設定に関するいくつかの問題の概要
この記事では、例を使用して、MySQL トリガーの追加、削除、変更、およびクエリ操作について説明しま...
ここではCentOS7が使用されており、カーネルバージョンは [root@localhost ~]#...
目次序文紹介-公式設定例序文vueCli を使用してプロジェクトを開発したことのある方は、少しがっか...
この記事では、プログレスバーヒストグラムを実現するためのvue+echartsの具体的なコードを参考...
この記事では、Linux 環境での ActiveMQ の展開方法について説明します。ご参考までに、詳...
この記事では、libudev ライブラリを使用して hidraw デバイスにアクセスします。 lib...
この記事の例では、参考のために航空機戦争ゲームを実装するためのJSの具体的なコードを共有しています。...
1. DOM要素を挿入、更新、または削除するときに、適切な場合は要素にスタイルクラス名を追加します。...
目次1. Set()+Array.from() を使用する2. 2層ループ+アレイ接合方式の使用3....
序文ウェブサイトのアクセス元をカウントしたい場合は、PHP を使用して情報を取得してデータベースに記...
1. Dockerネットワーク管理1. Dockerコンテナ方式1) Dockerが外部ネットワーク...
まず、Vue-cli をインストールする必要があります。 npm インストール -g vue-cli...
序文MySQL は、myisam、innodb、memory、archive、example など、...
目次序文iframeはサンドボックスを実装しますdiffメソッドを使用したサンドボックスの実装プロキ...
矢印関数は ES6 の新機能です。独自の this はありません。その this ポイントは外部のコ...