Partager les différences entre hash, chunkhash et contenthash dans webpack

Cet article présente principalement l'explication détaillée des différences entre hash, chunkhash et contenthash dans webpack. Il présente également l'utilisation et la différence de hash, chunkhash et contenthash en détail. J'espère que ceux qui sont intéressés pourront en savoir plus. cela peut aider tout le monde.

hash, chunkhash, contenthash

hash est généralement utilisé en combinaison avec le cache CDN. Après avoir été construit via webpack, le nom de fichier correspondant est généré et porte automatiquement la valeur MD5 correspondante. Si le contenu du fichier change, la valeur de hachage du fichier correspondant changera également et l'adresse URL référencée par le code HTML correspondant changera également, ce qui incitera le serveur CDN à extraire les données correspondantes du serveur source, puis à mettre à jour le cache local. Cependant, dans la pratique, il existe encore certaines différences entre ces calculs de hachage.
Construisons d'abord un scénario de test pour le simuler :

Structure du projet

La structure de notre projet est très simple, le fichier d'entrée index.js fait référence à index.css. Ensuite, jquery.js et test.js ont été créés en tant que bibliothèques publiques.

//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);
 }

Ensuite, nous modifions webpack.config.js pour simuler différents calculs de hachage

hash

Le hachage est lié à l'ensemble projet Concernant la construction, tant qu'il y a des changements de fichiers dans le projet, la valeur de hachage de l'ensemble de la construction du projet changera et tous les fichiers partageront la même valeur de hachage

 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')
  ]
 }

Selon ce qui précède configuration, après avoir exécuté la commande webpack, les résultats suivants peuvent être obtenus

Résultat de l'exécution 1 en utilisant le calcul de hachage :

Résultat de l'exécution 2 :

Nous pouvons voir que les valeurs de hachage des fichiers générés par la build sont toutes les mêmes, donc le calcul de hachage est lié à la construction de l'ensemble du projet. Les hachages générés dans le même processus de build sont tous identiques

chunkhash

Si le calcul de hachage est utilisé, la valeur de hachage générée après chaque build sera différente, même si le contenu du fichier n'a pas changé du tout. Il n'y a aucun moyen d'obtenir l'effet de mise en cache de cette manière. Nous devons passer à une autre méthode de calcul de la valeur de hachage, à savoir chunkhash.

Chunkhash est différent du hachage. Il analyse les fichiers dépendants en fonction de différents fichiers d'entrée (Entry), construit les morceaux correspondants et génère les valeurs de hachage correspondantes. Nous séparons certaines bibliothèques publiques et fichiers d'entrée de programme dans l'environnement de production, les emballons et les construisons séparément, puis nous utilisons chunkhash pour générer des valeurs de hachage. Ensuite, tant que nous ne modifions pas le code des bibliothèques publiques, nous pouvons garantir leur authenticité. les valeurs de hachage ne changeront pas.

 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')
  ]
 }

Résultat de l'exécution 1 calculé à l'aide de chunkhash :

Résultat de l'exécution 2 :

Nous pouvons voir qu'en raison de l'utilisation de chunkhash, le fichier d'entrée principal du projet Index.js et son fichier de dépendance correspondant Index.css partagent le même chunkhash car ils sont packagés dans le même module, mais les bibliothèques publiques sont des modules différents. , il y a donc un chunkhash séparé. Cela garantit que lors de la construction en ligne, tant que le contenu du fichier ne change pas, la construction ne sera pas répétée

contenthash

Dans l'exemple de chunkhash, nous pouvons le voir car index.css est index.js est référencé, il partage donc la même valeur chunkhash. Mais il y a un problème avec cela : si index.js modifie le code, même si le contenu du fichier CSS ne change pas, car le module a changé, le fichier CSS sera construit à plusieurs reprises.
À l'heure actuelle, nous pouvons utiliser la valeur contenthash dans l'extra-text-webpack-plugin pour garantir que même si le contenu des autres fichiers du module où se trouve le fichier CSS change, tant que le contenu du css reste inchangé, il ne sera pas construit à plusieurs reprises.

 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')
  ]
 }

Résultat de l'exécution 1 calculé à l'aide de contenthash :

Résultat de l'exécution 2 :

Recommandations associées :

Partager la gestion des styles par Webpack

Comment utiliser les éléments externes de Webpack

Détaillé explication de la différence entre webpack require.ensure et require AMD_javascript skills

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!