どのようにして、Webpack長期キャッシングが機能しますか？

Question

私はこのプロジェクトを決してプロジェクトで使用しませんでしたが、私はこれをyeomanで見つけましたwebpack.make.js

このコード：

config.plugins.push(new CommonsChunkPlugin({ 
    name: 'vendor', 

    // filename: "vendor.js" 
    // (Give the chunk a different name) 

    minChunks: Infinity 
    // (with more entries, this ensures that no other module 
    // goes into the vendor chunk) 
})); 



    config.output = { 
    // Absolute output directory 
    path: BUILD ? path.join(__dirname, '/dist/client/') : path.join(__dirname, '/.tmp/'), 

    // Output path from the view of the page 
    // Uses webpack-dev-server in development 
    publicPath: BUILD || DEV || E2E ? '/' : `http://localhost:${8080}/`, 
    //publicPath: BUILD ? '/' : 'http://localhost:' + env.port + '/', 

    // Filename for entry points 
    // Only adds hash in build mode 
    filename: BUILD ? '[name].[hash].js' : '[name].bundle.js', 

    // Filename for non-entry points 
    // Only adds hash in build mode 
    chunkFilename: BUILD ? '[name].[hash].js' : '[name].bundle.js' 
}; 

なぜ我々は[hash]とCommonsChunkPluginを使用SHOLD？ それはどういう意味ですか？

これらのツールで簡単な例を得ることはできますか？

Answer 1

[hash]は、バンドルファイルのチェックサムで構成されています。

バンドルの内容が変更されると変更されます。それ以外の場合は変更されません。これはブラウザのキャッシュ最適化に役立ちます.JSコードの新しいバージョンをサーバーに展開すると、以前のバージョンとは異なるファイル名になり、ブラウザはキャッシュ設定に関係なく最新のバージョンを取得します。

→see webpack documentation on long term caching

CommonsChunkPluginはロード時間を最適化するために、別の束にあなたのバンドルを分割するために使用されます。

bundle-a.jsのページAとbundle-b.jsのページBがあるとします。両バンドルは、あなたがのは、バンドル・lib.jsページAとBにロードされ、ライブラリモジュールXが含まれているそれを呼び出すと、Y.

→see webpack documentation on code splitting

せ、別のチャンクのバンドルを作成することができ、同じライブラリモジュールXとYを含んで

→see webpack documentation on the plugin, with examples