웹 최적화hash

본문 데모의 완전한 프로젝트 코드, dva-incremental-hash 참조

카탈로그

시작

새 페이지 추가

페이지 게으름

hash

수정 2페이지

수정 3페이지

결론

chunkhash

수정 2페이지

수정 3페이지

결론

소결

개시하다

dva new dva-incremental-hash

npm run build

File sizes after gzip:

  88.61 KB  dist/index.js
  316 B     dist/index.css

새 페이지 추가

vim src/routes/SecondPage.js

import React from 'react';
import { connect } from 'dva';

function SecondPage() {
  return (
    

         
    
  );
}

SecondPage.propTypes = {
};

export default connect()(SecondPage);

vim src/routes/ThirdPage.js

import React from 'react';
import { connect } from 'dva';

function ThirdPage() {
  return (
    

         
    
  );
}

ThirdPage.propTypes = {
};

export default connect()(ThirdPage);

페이지가 로드되지 않음

vim src/router.js

import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import dynamic from 'dva/dynamic';
import IndexPage from './routes/IndexPage';

function RouterConfig({ history, app }) {
  return (
    
      
        
         import('./routes/SecondPage'),
            })
          }
        />
      
    
  );
}

export default RouterConfig;

npm run build

File sizes after gzip:

  90.71 KB      dist/index.js
  316 B         dist/index.css
  252 B         dist/1.async.js
  250 B (-2 B)  dist/0.async.js

게으름뱅이에 대한 상세한 소개는 웹 최적화의 게으름뱅이

hash

vim webpack.config.js

const webpack = require('webpack');

module.exports = (webpackConfig, env) => {
  webpackConfig.output.chunkFilename = '[name].[hash].js';

  return webpackConfig;
}

npm run build

File sizes after gzip:

  90.73 KB  dist/index.js
  316 B     dist/index.css
  252 B     dist/1.37e802acad82568562ee.js
  250 B     dist/0.37e802acad82568562ee.js

페이지 수정

vim src/routes/SecondPage.js

import React from 'react';
import { connect } from 'dva';

function SecondPage() {
  return (
    

          hash
    
  );
}

SecondPage.propTypes = {
};

export default connect()(SecondPage);

npm run build

File sizes after gzip:

  90.73 KB      dist/index.js
  316 B         dist/index.css
  256 B (+4 B)  dist/1.0ebbd88139270011861d.js
  250 B         dist/0.0ebbd88139270011861d.js

3페이지 수정

vim src/routes/ThirdPage.js

import React from 'react';
import { connect } from 'dva';

function ThirdPage() {
  return (
    

          hash
    
  );
}

ThirdPage.propTypes = {
};

export default connect()(ThirdPage);

npm run build

File sizes after gzip:

  90.73 KB      dist/index.js
  316 B         dist/index.css
  256 B (+6 B)  dist/0.08423b7136e388fcf70e.js
  256 B         dist/1.08423b7136e388fcf70e.js

결론

프로젝트 파일hash가 모두 같다

수정으로hash가 모두 업데이트됨

chunkhash

vim webpack.config.js

const webpack = require('webpack');

module.exports = (webpackConfig, env) => {
  webpackConfig.output.chunkFilename = '[name].[chunkhash].js';

  return webpackConfig;
}

npm run build

File sizes after gzip:

  90.76 KB  dist/index.js
  316 B     dist/index.css
  256 B     dist/0.ddd1c453a069c8bf405a.js
  256 B     dist/1.7f66e444078da2a99cb1.js

페이지 수정

vim src/routes/SecondPage.js

import React from 'react';
import { connect } from 'dva';

function SecondPage() {
  return (
    

          chunkhash
    
  );
}

SecondPage.propTypes = {
};

export default connect()(SecondPage);

npm run build

File sizes after gzip:

  90.76 KB      dist/index.js
  316 B         dist/index.css
  256 B         dist/0.ddd1c453a069c8bf405a.js
  260 B (+4 B)  dist/1.9753b997c58c56af204f.js

3페이지 수정

vim src/routes/ThirdPage.js

import React from 'react';
import { connect } from 'dva';

function ThirdPage() {
  return (
    

          chunkhash
    
  );
}

ThirdPage.propTypes = {
};

export default connect()(ThirdPage);

npm run build

File sizes after gzip:

  90.76 KB      dist/index.js
  316 B         dist/index.css
  260 B (+4 B)  dist/0.2e7678b447627bab62d5.js
  260 B         dist/1.9753b997c58c56af204f.js

결론

프로젝트 파일chunkhash가 각각 다르다

수정 파일만 업데이트

소결

서류
수정
변동분 업데이트
hash
모두 같다
모두 업데이트
✘
chunkhash
같지 않다
수정 파일만 업데이트
✔︎

참고 자료

캐시

Webpack에서hash와chunkhash의 차이, 그리고 js와 css의hash지문 결합 방안

더 많은 글, 나의 개인 블로그를 지지해 주십시오