nuxt.config.js の build プロパティで、base64 エンコードできる画像のファイルサイズの上限を変更できる。
nuxtjs で web サービスの自社プロダクトの開発と運用をやっているエンジニアです。
ある日、ロゴの画像を変更してほしいとデザイナーから依頼があり、staticディレクトリにある画像を差し替え社内開発環境にリリースしました。しかし、ブラウザキャッシュが効いてしまい、昔のロゴが表示されてしまいました。
これについて、何かクエリバラメーターをつけるなどして、画像のパスを変更すれば解決します。何か別の解決方法がないかを探したところ、assets に静的ファイルをおけば、webpack が静的ファイルを base64 エンコードし、html や css に埋め込みをしてくれるみたいでした。しかし、試したところ、どうやらbase64エンコードしてくれる画像のファイルサイズがデフォルトで1KBと決まっているみたいです。それを変更した変更したかったのですが、やり方を探しても見つからなかったので、せっかくならと思い記事にまとめました。
結論から話すと、下のように書くと、base64 エンコードしてくれる静的ファイルのサイズ上限を変更できました。
module.exports = {
extend(config, { loaders }) {
// これで1MB以下のassetsディレクトリにある静的ファイルがbase64エンコードされます。
loaders.imgUrl.limit = 100000
},
}
この loaders と imgUrl がどこから来たからというと、下のドキュメントに記載されていました。
https://ja.nuxtjs.org/api/configuration-build/#loaders
// loadersの中身
{
file: {},
fontUrl: { limit: 1000 },
imgUrl: { limit: 1000 }, // デフォルトは1KB
pugPlain: {},
vue: {
transformAssetUrls: {
video: 'src',
source: 'src',
object: 'src',
embed: 'src'
}
},
css: {},
cssModules: {
localIdentName: '[local]_[hash:base64:5]'
},
less: {},
sass: {
indentedSyntax: true
},
scss: {},
stylus: {},
vueStyle: {}
}
全部のコードを追えていないため、 imgUrl のプロパティがどう url-loader の設定と紐づいているかまではわかっていないのですが、プロパティの名前から予測ができた。実際試したところ、うまく base64 エンコードされました。
ちなみに、base64 エンコードされると html ではこのようになります。