webpack에서 해시, 청크해시, 콘텐츠해시 간의 차이점 공유

이 글은 webpack에서 hash, Chunkhash, contenthash의 차이점에 대한 자세한 설명을 위주로 소개하고 있으며, 관심 있는 분들도 자세하게 알아보실 수 있기를 바랍니다. 모두를 도와주세요.

hash,chunkhash,contenthash

hash는 일반적으로 CDN 캐시와 함께 사용되며 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를 수정하여 다양한 해시 계산을 시뮬레이션합니다.

hash

hash는 프로젝트에 파일 변경이 있는 한 전체 프로젝트의 구성과 관련이 있습니다. 전체 프로젝트 빌드가 변경되고 모든 파일은 모두 동일한 해시 값을 공유합니다

 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로 변경해야 합니다.

Chunkhash는 해시와 다릅니다. 서로 다른 항목 파일(Entry)을 기반으로 종속 파일을 구문 분석하고 해당 청크를 빌드하고 해당 해시 값을 생성합니다. 우리는 프로덕션 환경에서 일부 공공 라이브러리와 프로그램 항목 파일을 분리하여 별도로 패키징하고 빌드한 다음 청크해시를 사용하여 해시 값을 생성합니다. 그러면 공공 라이브러리의 코드를 변경하지 않는 한 우리는 이를 보장할 수 있습니다. 해시 값은 영향을 받지 않습니다.

 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는 동일한 모듈에 패키징되어 있기 때문에 동일한 청크해시를 공유하지만, 공용 라이브러리는 다른 모듈이기 때문에 별도의 청크해시를 갖습니다. 이렇게 하면 온라인으로 구축할 때 파일 내용이 변경되지 않는 한 다시 구축되지 않습니다. 동일한 청크해시 값을 공유합니다. 하지만 여기에는 문제가 있습니다.index.js가 코드를 변경하면 CSS 파일의 내용이 변경되지 않더라도 모듈이 변경되었기 때문에 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:

관련 권장 사항:

webpack이 스타일을 처리하는 방법을 공유하세요

에서 외부 항목을 사용하는 방법 웹팩

webpack require.ensure와 AMD_javascript 기술 요구의 차이점에 대한 자세한 설명

위 내용은 webpack에서 해시, 청크해시, 콘텐츠해시 간의 차이점 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!