シェア:

Nuxt Booster

• ✨   リリースノート
• 👁   プレビュー

Nuxt Boosterは、生成されたWebサイトのLighthouseパフォーマンス最適化を引き継ぎます。使用されるすべてのコンポーネントとリソースは、ビューポートに基づいてオンデマンドでロードされます。

はじめに

📖   ドキュメント を参照してください。

• v2: basics.github.io/nuxt-booster/v2/

要件

• NodeJS >= 19
• NuxtJS >= 3.5.0

機能

• フォント、コンポーネント、画像、写真、iframeなどのビューポートベースのページリソースの動的な読み込み
• 初期パフォーマンス測定によるJavaScript実行のオプションのブロック
• 不要なJavaScriptファイルを排除することによる、JavaScriptファイルの最適化された初期ロード
• 現在のビューポート外にある不要なリソース（コンポーネントを含む）のロードを防止します。
• 帯域幅またはハードウェアが損なわれた場合に、ユーザーにUXの低下を通知するオプションのインフォレイヤーコンセプト。
• フォント宣言のまったく新しいアプローチ
• 最適化された画像コンポーネント（ビューポートベースのソースをサポート（例：風景/ポートレート））
• 最適化された画像コンポーネント
• SEOフレンドリーな遅延ハイドレーションモードをサポート（画像+写真）
• 最適化されたyoutube/vimeoコンポーネント（異なる解像度での自動生成ポスター画像）

結果

• 現在のビューポートに基づいて、必要な最小限のリソースを提供します
• 指定されたとおりにツールを使用すると、Lighthouseパフォーマンススコアが100/100になります

📖   詳細はこちら

ブラウザのサポート

nuxt-boosterは、Internet Explorer 11ブラウザで使用できます。ブラウザの互換性の詳細をご覧ください

IE / Edge	Firefox	Chrome	Safari	iOS Safari	Samsung	Opera	Vivaldi
Edge	最新の2バージョン	最新の2バージョン	最新の2バージョン	最新の2バージョン	最新の2バージョン	最新の2バージョン	最新の2バージョン

開発

1. このリポジトリをクローンします。
2. npm installまたはyarn installを使用して依存関係をインストールします。
3. npm run devまたはyarn devを使用して開発サーバーを起動します。

プレビュー

1. このリポジトリをクローンします。
2. npm installまたはyarn installを使用して依存関係をインストールします。
3. npm run start:generateまたはyarn start:generateを使用して、ビルドしてexpressで起動します。
4. ブラウザでhttp://127.0.0.1:3000を開きます。

または、こちらをご覧ください

• プレビュー

コンサルティングとサポート

別途料金でサポート、コンサルティング、またはコードレビューが必要ですか？メールでお問い合わせください：stephan.gerbeth@gmail.com、lammpee@gmail.com。ご連絡をお待ちしております。

ライセンス

MITライセンス