Nodejsで画像キャッシュを設定する方法

現代の Web サイトでは、画像が重要な役割を果たしています。美しいだけでなく、Web サイトの速度とパフォーマンスも最適化できます。ただし、ユーザーがサイトにアクセスするたびに画像を再ダウンロードすると、読み込み時間が遅くなる可能性があります。これが画像キャッシュの機能です。この記事では、Node.js Web サイトを最適化するために画像キャッシュを設定する方法について説明します。

画像キャッシュとは何ですか?

画像キャッシュとは、ユーザーが Web サイトにアクセスするたびに同じ画像を再ダウンロードすることを避けるために、ダウンロードした画像をローカル ストレージに保存することを指します。画像を再ダウンロードする回数を減らすことで、Web サイトの読み込み速度を大幅に向上させることができます。ユーザーがそのページに再度アクセスすると、ブラウザはまず同じ画像がローカル ストレージにすでに存在するかどうかを確認します。存在する場合、イメージはサーバーから再ダウンロードされるのではなく、ローカル ストレージから直接ロードされます。

画像キャッシュを設定する

画像キャッシュを設定するには、HTTP ヘッダーを使用して、新しい画像をいつロードする必要があるか、およびすでにキャッシュされた画像をいつロードする必要があるかをブラウザに通知する必要があります。これは、Cache-Control ヘッダーと Expires ヘッダーを使用して実現できます。

Cache-Control ヘッダーは最も広く使用されているオプションであり、リソースごとのキャッシュ動作を指定できます。応答ヘッダーで Cache-Control を設定すると、リソースをキャッシュする期間をブラウザーに指示したり、リソースをキャッシュする必要がある条件をブラウザーに指示したりできます。

// サンプル コード: ブラウザーに静的リソース ファイルを 1 年間キャッシュさせます
app.use(express.static('public', { maxAge: '1y' }))

このコードは、ブラウザーに静的リソース ファイルを 1 年間キャッシュするように指示します。このようにして、ユーザーが初めて Web サイトにアクセスすると、すべての静的リソース ファイルがキャッシュされ、翌年には再度ダウンロードする必要がなくなります。

画像キャッシュを設定するもう 1 つの方法は、Expires ヘッダーを使用することです。 Expires を使用すると、期限切れになる時期をブラウザに通知し、リソースを再ダウンロードできます。 Expires は HTTP 1.0 で使用されるメソッドで、リソースをいつ再取得する必要があるかをブラウザーに通知します。

// サンプル コード: 画像のキャッシュ時間を 1 年に設定します
app.get('/images/:name', function(req, res, next) {
res.setHeader( ' Expires', new Date(Date.now() 31536000000).toUTCString())
next();
})

このコードは、ブラウザーにこの画像を 1 年以内にキャッシュするように指示します。 Expires は絶対時間であるため、タイムゾーンの問題があることに注意してください。タイムゾーンの問題を避けるために、 toUTCString() メソッドを使用して時刻を UTC 時刻に変換する必要があります。

概要

この記事では、Node.js Web アプリケーションのパフォーマンスを向上させるために画像キャッシュを設定する方法について説明しました。 Cache-Control ヘッダーと Expires ヘッダーについて説明し、画像キャッシュ動作の設定に役立つコード例を提供しました。これらのテクノロジーを使用すると、Web サイトの読み込み時間を大幅に短縮し、帯域幅の消費を削減し、ユーザーにより良いエクスペリエンスを提供できます。同時に、キャッシュには有効期間があるため、コンテンツの鮮度を確保するには適切なタイミングでキャッシュをクリアする必要があることにも留意する必要があります。

以上がNodejsで画像キャッシュを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。