本文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 (
第二页
);
}
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
关于懒加载的详细介绍 参考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 (
第二页 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
修改第三页
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
修改第三页
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各不相同
只有修改文件chunkhash更新
小结
| 文件 | 修改 | 增量更新 | |
|---|---|---|---|
| hash | 都相同 | 都更新 | ✘ |
| chunkhash | 不相同 | 只更新修改文件 | ✔︎ |
参考
缓存
Webpack中hash与chunkhash的区别，以及js与css的hash指纹解耦方案
更多文章, 请支持我的个人博客