Webpack でのハッシュ、チャンクハッシュ、コンテンツハッシュの違いの共有-jsチュートリアル-php.cn

Webpack でのハッシュ、チャンクハッシュ、コンテンツハッシュの違いの共有

小云云

リリース： 2018-01-08 09:45:30

オリジナル

2004 人が閲覧しました

この記事では、webpack の hash、chunkhash、contenthash の違いについて詳しく説明していますので、興味のある方はぜひご覧ください。みんなを助けて。

hash、chunkhash、contenthash

hash は、通常、Webpack を通じて構築された後、対応するファイル名が生成され、対応する MD5 値を自動的に保持します。ファイルのコンテンツが変更されると、対応するファイルのハッシュ値も変更され、対応する HTML によって参照される URL アドレスも変更され、CDN サーバーがソースサーバーから対応するデータを取得し、ローカルキャッシュを更新します。ただし、実際に使用する場合、これらのハッシュ計算には依然として一定の違いがあります。
最初にシミュレートするテストケースを構築しましょう:

プロジェクト構造

私たちのプロジェクト構造は非常に単純で、エントリファイルindex.js はindex.cssを参照します。次に、jquery.js と test.js がパブリックライブラリとして作成されました。

//index.js

 require('./index.css')
 module.exports = function(){
  console.log(`I'm jack`)
  var a = 12
 }

ログイン後にコピー

//index.css

 .selected : {
   display: flex;
   transition: all .6s;
   user-select: none;
   background: linear-gradient(to bottom, white, black);
 }

ログイン後にコピー

次に、さまざまなハッシュ計算をシミュレートするために webpack.config.js を変更します

ハッシュ

ハッシュは、プロジェクト内でファイルの変更がある限り、プロジェクト全体の構築に関連します。プロジェクト全体のビルドが変更され、すべてのファイルは同じハッシュ値を共有します

 var extractTextPlugin = require('extract-text-webpack-plugin'),
  path = require('path')
 
 module.exports = {
  context : path.join(__dirname,'src'),
  entry:{
  main: './index.js',
  vender:['./jquery.js','./test.js']
  },
  module:{
  rules:[{
   test:/\.css$/,
   use: extractTextPlugin.extract({
   fallback:'style-loader',
   use:'css-loader'
   })
  }]
  },
  output:{
  path:path.join(__dirname, '/dist/js'),
  filename: 'bundle.[name].[hash].js',
  },
  plugins:[
  new extractTextPlugin('../css/bundle.[name].[hash].css')
  ]
 }

ログイン後にコピー

上記の設定に従って、webpack コマンドを実行すると、次の結果が得られます

ハッシュ計算を使用した実行結果 1:

実行結果2:

ビルドによって生成されたファイルのハッシュ値はすべて同じであるため、ハッシュ計算はプロジェクト全体の構築に関連していることがわかります。同じビルドプロセスで生成されるハッシュ値はすべて同じです

chunkhash

ハッシュ計算を使用すると、ファイルの内容がまったく変わっていない場合でも、ビルドごとに生成されるハッシュ値は異なります。この方法でキャッシュ効果を実現する方法はありません。別のハッシュ値計算方法、つまりチャンクハッシュに変更する必要があります。

チャンクハッシュは、さまざまなエントリファイル (エントリ) に基づいて依存関係ファイルを解析し、対応するチャンクを構築し、対応するハッシュ値を生成します。実稼働環境でいくつかのパブリックライブラリとプログラムエントリファイルを分離し、それらを個別にパッケージ化してビルドします。その後、chunkhash を使用してハッシュ値を生成します。その後、パブリックライブラリのコードを変更しない限り、それらのライブラリの安全性を確保できます。ハッシュ値は影響を受けません。

 var extractTextPlugin = require('extract-text-webpack-plugin'),
  path = require('path')
 
 module.exports = {
  ...
  ...
  output:{
  path:path.join(__dirname, '/dist/js'),
  filename: 'bundle.[name].[chunkhash].js',
  },
  plugins:[
  new extractTextPlugin('../css/bundle.[name].[chunkhash].css')
  ]
 }

ログイン後にコピー

chunkhash を使用して計算された実行結果 1:

実行結果 2:

chunkhash の使用により、プロジェクトのメインエントリファイル Index.js とそれに対応する依存関係ファイル Index が使用されていることがわかります。 .css は同じモジュールにパッケージ化されているため、同じチャンクハッシュを共有しますが、パブリックライブラリには別のモジュールであるため、別のチャンクハッシュがあります。これにより、オンラインでビルドする場合、ファイルの内容が変更されない限り、再度ビルドされることはなくなります

contenthash

chunkhash の例では、index.css がindex.js によって参照されていることがわかります。同じチャンクハッシュ値を共有します。しかし、これには問題があり、css ファイルの内容が変更されていなくても、index.js のコードを変更すると、モジュールが変更されたため、css ファイルが繰り返しビルドされてしまいます。
現時点では、extra-text-webpack-plugin の contenthash 値を使用して、css ファイルが配置されているモジュール内の他のファイルの内容が変更されても、css ファイルの内容が残っている限り確実に変更されるようにすることができます。変更されない限り、繰り返しビルドされることはありません。

 var extractTextPlugin = require('extract-text-webpack-plugin'),
  path = require('path')
 
 module.exports = {
  ...
  ...
  output:{
  path:path.join(__dirname, '/dist/js'),
  filename: 'bundle.[name].[chunkhash].js',
  },
  plugins:[
  new extractTextPlugin('../css/bundle.[name].[contenthash].css')
  ]
 }

ログイン後にコピー

contenthash を使用して計算された実行結果 1:

実行結果 2: