スクリプトとモジュールはどのようにキャッシュされますか？

Question

画像のようなアセットの場合は、srcというアトリビュートが関連付けられています。つまり、アセットを再度ダウンロードしてレンダリングするには、そのアセットの有効期限をブラウザが確認する前にsrcページにこれはReactなどのスクリプトやモジュールでどのように機能しますか？それがCDNの場合、ブラウザは最初にスクリプトをダウンロードしてから、初めてスクリプトに遭遇したときに実行しますか？その後、このスクリプトを再度必要とするたびに、キャッシュされた（ソースから再度ダウンロードするのではなく）キャッシュからロードして実行しますか？あなたがノードモジュールとしてReactを持っていれば、これは同じことでしょうか？

Answer 1

これは非常に大きなトピックです。基本的な答えは、ブラウザがアセットをどのようにキャッシュするかということです。イメージには有効期限がありますが、これらの日付はサーバーから送信されたHTTPヘッダーに設定されています。あなたはjavascriptとサーバからリクエストする他のファイルに同じヘッダーを設定することができ、ブラウザは同じ方法でそれらをキャッシュします。

（サーバーまたはキャッシュから）JavaScriptのアセットを取得すると、ブラウザはJavaScriptを解析して実行します。

ノードモジュールはノードランドに配置されます。通常、ブラウザのnode_modulesでコードを使用するには、webpackやbrowersifyなどのツールを使用してコードを実行します。これらのツールは、すべてのコード（アプリケーション+反応+他のもの）を1つのファイル（通常は）にまとめ、ブラウザに提供します。ブラウザはnode_modulesについて何も知らない。あなたが提供したjavascriptを解析して実行します。

1つのバンドルファイルは、送信されたヘッダーに基づいてキャッシュされます。 CDNは（基本的に）素早く資産を提供するように最適化された特別なサーバーです。