シェアする:

Nuxt Booster

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

Nuxt Booster は、生成されたウェブサイトの 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を開きます。

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

• プレビュー

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

追加のサポート、コンサルティング、または適切な料金でのコードレビューが必要ですか？メールでお気軽にお問い合わせください: [email protected], [email protected]. ご連絡お待ちしております。

ライセンス

MITライセンス