NUXT.JS 入門 #6 – NUXT.JS と 静的ファイル の管理

Nuxt.js を利用したWebアプリケーション開発の手法を紹介していきます。
第六回目は Nuxt.js のアプリケーションにおける 静的ファイル の管理手法を紹介していきます。

Nuxt.js では static フォルダに配置したファイルが、静的ファイルとして配信されます。

このフォルダ内には、アプリケーション内で利用される画像ファイルの他、robots.txtsitemap.xmlなどのSEO関連ファイル、CNAME.htaccess などのホスティング関連ファイルなど、サーバ上で必要な様々なものを配置する事が出来ます。

テンプレートからそれらのファイルを参照する場合、単に / で始まるURLで参照を記述します。

<img src="/images/logo.png"/>

上記 img 要素の画像は、 static/images/logo.png より配信されます。

Webpackによる画像の管理

静的に配信されるファイルのうち、画像に関してはWebpack 経由での管理を行うことも出来ます。

画像を Webpack 経由で管理したい場合、URL の記述を単に ~ からはじめて記述します。

<img src="~/assets/images/logo.png"/>

上記のimg 要素の画像は、assets/images/logo.png より配信されます。これは Nuxt.jsが取り扱う CSS 内で url('~/assets/images/bg.png') のようにして画像を参照する際にも同様です。

Webpack を通じて画像を関する方法は、static フォルダから画像を配信する方法に比べて、次のようなメリットがあります。

  • Webpack の file-loader がファイル名に自動的にバージョンハッシュを付与し、ブラウザキャッシュによる更新漏れを防いでくれる。
  • Webpack の url-loader がファイルサイズの小さな画像ファイルに自動的にbase64処理を実施し、テンプレートへの埋め込みを実施してくれる。

file-loaderによるバージョンハッシュ

Webpack の管理する画像URLは実際に記述したURLとは若干異なり、ファイル名の末尾にバージョンハッシュが付与されたものになります。

これは、同一のファイル名で画像の中身を更新した際に、画像の中身がブラウザキャッシュの影響で正常に更新されない問題を解決するために必要で、運用上非常に便利です。

static フォルダから配信される画像ファイルは、記述したままのURLでファイルが配信されるため、画像の内容を更新した際に古いブラウザキャッシュが影響して上手く更新が出来ないケースがあります。

url-loader による base64 処理

Webpack の管理する画像が 1kB未満のファイル容量だった場合、そのファイルは base64 エンコードされてテンプレート内にインライン化されます。

小さな画像の取り込みで沢山のリクエストが発生するのを防ぎたいときなどに便利です。

Webpackで取り扱えない画像ファイル

Webpack経由での画像配信は便利な一方で、全てのケースでこれがりようできるわけではありません。

  • link タグ経由で読み込まれる Nuxt管理外の CSS 内での url(...) では、Webpack を利用することが出来ません。
  • 動的に生成されるURLでは、Webpack がビルド時に画像のURLを特定できないため、Webpack の機能を利用する事が出来ません。

動的に生成されるURLとは以下のようなケースで、画像のURLが動的に決定されるケースの例です。

<div v-for="user in users">
  <img src="`/images/${user.avatarPath}`"/>
</div>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です