0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Nuxtjsでビルド時に生成される静的コードの種類、7選

Posted at

Nuxtにおける「ビルド時に生成される静的コード」の中には、アプリケーションの構造や内容がビルドプロセスで確定し、実行時には変更されないような処理や機能が含まれます。これらは、パフォーマンスを最適化したり、アプリケーションを安定化させたりするためにビルド時に確定されるものです。具体的には、以下のような処理や機能が該当します:

  1. 静的ルーティング
    Nuxtでは、pagesディレクトリにファイルを配置すると、ビルド時にそれを元に自動的にルーティングが生成されます。このルーティング情報はビルド時に確定され、ランタイムに変更することはできません(ただし、動的ルーティングや動的生成を使って変化させることは可能)。
  2. 静的なアセットの最適化
    CSSやJavaScript、画像などの静的なアセットはビルド時に圧縮・最適化され、バンドルに含まれます。これにより、ランタイムにおいてパフォーマンスを向上させ、ユーザーに対する読み込み時間を短縮する効果があります。
  3. コードスプリッティング
    Nuxtはビルド時に自動的にコードスプリッティング(コード分割)を行い、各ページに必要なリソースだけがバンドルされるように最適化します。これにより、特定のページにアクセスしたときにだけ必要なコードがロードされるため、初期ロードのパフォーマンスが向上します。
  4. コンポーネントのトランスパイル
    Vueコンポーネント(.vueファイル)やJavaScriptファイルは、ビルド時にトランスパイルされ、ブラウザで実行可能なJavaScriptコードに変換されます。これにより、ランタイムでは変換済みのコードが実行され、ブラウザの対応状況を意識せずに新しい構文が利用可能になります。
  5. サーバーサイドの静的コンテンツ生成(SSG)
    Nuxtのnuxt generateを使って静的サイトを生成する場合、各ページがビルド時に静的なHTMLとして生成されます。これにより、ビルド時に生成された静的HTMLが配信されるため、ユーザーのリクエストに応じてページがサーバーでレンダリングされる必要がなく、ランタイムパフォーマンスが大幅に向上します。
  6. Vuexストアの初期設定
    ストアの初期状態やモジュール構成などもビルド時に決定されます。特定のグローバルな設定や初期データをビルド時に確定し、ランタイムでの変更が不要な部分を固定します。
  7. 環境変数(build-time環境変数)
    Nuxtでは、.envファイルやnuxt.config.jsで設定された環境変数のうち、publicRuntimeConfigに含まれないものはビルド時に固定されます。例えば、APIのエンドポイントがビルド時に確定される場合、ランタイムにおいて変更できない値として扱われます。

これらの静的な要素は、アプリケーションのビルドプロセスで確定されるため、実行時にパフォーマンスが向上し、またユーザーに安定したコンテンツを提供できるメリットがあります。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?