フォントを追加してもパフォーマンスに悪影響はありません。この記事では、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 のインストール方法と設定に関するいくつかの問題の概要
現在、プロジェクトの要件により、フォームの送信を制御し、送信前にデータを検証および処理するために j...
<br />この記事では、開発者ツールのさまざまなメニューについて簡単に説明しました。こ...
適切なデータベース仕様は、ソフトウェア実装の複雑さを軽減し、通信コストを削減するのに役立ちます。この...
1.fullpage.js ダウンロードアドレスhttps://github.com/alvarot...
nginx、mysql、tomcat などのサービスをインストールするときに、使用する必要があるポー...
クエリで EXPLAIN を実行するとデータベースが変更されるかどうかを尋ねられた場合、おそらく「い...
この記事では、アンカー配置を実現するためのVue +要素UIの具体的なコードを例として紹介します。具...
この記事の例では、ドロップダウンボックス選択コンポーネントを実装するためのjsの具体的なコードを参考...
Java開発キットjdkをダウンロードするJDK のダウンロード アドレスはhttp://www.o...
これら 16 のサイトはそれぞれ注意深く読む価値があり、どのサイトでも推奨されている Web サイト...
目次序文1. リクエスト内容が大きすぎる解決: CDN の紹介リクエストリソースを圧縮する1. HT...
目次背景なぜエラー処理が必要なのでしょうか? async await より適切なエラー処理まとめ要約...
スライドショーは Web ページでよく見られます。美しい写真が使われています。こちらは純粋な CSS...
導入前回の記事では、Redis をインストールして設定しましたが、まだ終わりではありません。PHP ...
以前、写真が与えられ、その写真スタイルに基づいてフォームを作成するという課題に遭遇しました。しかし、...