本文Demo的完整工程代碼, 參考dva-incremental-hash

目錄

• 開始

• 添加新頁面

• 頁面懶加載

• hash

  • 修改第二頁

  • 修改第三頁

  • 結論

• chunkhash

  • 修改第二頁

  • 修改第三頁

  • 結論

• 小結

開始

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 (
    <div>
      第二頁
    </div>
  );
}

SecondPage.propTypes = {
};

export default connect()(SecondPage);

vim src/routes/ThirdPage.js

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

function ThirdPage() {
  return (
    <div>
      第三頁
    </div>
  );
}

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 (
    <Router history={history}>
      <Switch>
        <Route path="/" exact component={IndexPage} />
        <Route
          path="/second"
          exact
          component={
            dynamic({
              app,
              component: () => import('./routes/SecondPage'),
            })
          }
        />
      </Switch>
    </Router>
  );
}

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

關于懶加載的詳細介紹 參考web優化 之 懶加載

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 (
    <div>
      第二頁 hash
    </div>
  );
}

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

修改第三頁

vim src/routes/ThirdPage.js

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

function ThirdPage() {
  return (
    <div>
      第三頁 hash
    </div>
  );
}

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 (
    <div>
      第二頁 chunkhash
    </div>
  );
}

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

修改第三頁

vim src/routes/ThirdPage.js

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

function ThirdPage() {
  return (
    <div>
      第三頁 chunkhash
    </div>
  );
}

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各不相同

• 只有修改文件chunkhash更新

小結

參考

• 緩存

• Webpack中hash與chunkhash的區別，以及js與css的hash指紋解耦方案

更多文章, 請支持我的個人博客