webpack中 hash chunkhash
2024-10-20 11:51:07
hash一般是结合CDN缓存来使用,通过webpack构建之后,生成对应文件名自动带上对应的MD5值。如果文件内容发生改变的话,那么对应文件hash值也会改变,对应的HTML引用的URL地址也会改变,触发CDN服务器从原服务器上拉取对应数据,进而更新本地缓存。
hash
hash是跟整个项目的构建相关,构建生成的文件hash值都是一样的,所以hash计算是跟整个项目的构建相关,同一次构建过程中生成的hash都是一样的,只要项目里有文件更改,整个项目构建的hash值都会更改。
如果出口是hash,那么一旦针对项目中任何一个文件的修改,都会构建整个项目,重新获取hash值,缓存的目的将失效。
chunkhash
采用hash计算的话,每一次构建后生成的hash值都不一样,即使文件内容压根没有改变。这样子是没办法实现缓存效果,我们需要另一种hash值计算方法,即chunkhash。
chunkhash和hash不一样,它根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk,生成对应的hash值。我们在生产环境里把一些公共库和程序入口文件区分开,单独打包构建,接着我们采用chunkhash的方式生成hash值,那么只要我们不改动公共库的代码,就可以保证其hash值不会受影响。
由于采用chunkhash,所以项目主入口文件main.js及其对应的依赖文件main.css由于被打包在同一个模块,所以共用相同的chunkhash,但是公共库由于是不同的模块,所以有单独的chunkhash。这样子就保证了在线上构建时只要文件内容没有更改就不会重复构建
配置如下
output: {
filename: '[name].[chunkhash].js',
chunkFilename: '[name].[chunkhash].js',
publicPath: publishPath.publishPath + publishPath.prefix +'/'
},
如果单独抽出css 文件的需要加上
new extractTextPlugin({
filename: 'style/[name][chunkhash].css'
}),
插件中添加
const WebpackChunkHash = require('webpack-chunk-hash');
new webpack.HashedModuleIdsPlugin(),
new WebpackChunkHash(),
最新文章
- ADO 连接数据库,取到VT_DATE型日期转换成 int型
- @helper函数使用方法
- 转载:javascript面向对象编程:非构造函数的继承
- POJ2001-Shortest Prefixes-Trie树应用
- css font-face自定义字体
- BZOJ3850: ZCC Loves Codefires
- js 获取当前时间格式怎么转换?
- java web 代码
- Python 基于学习 网络小爬虫
- MySQL5.6自动化部署(二进制)
- Requests抓取有道翻译结果
- redis 突然大量逐出导致读写请求block
- python--第十八天总结(Django进阶)
- ListBox、ListCtrl
- 自学Linux Shell2.2-GHOME Terminal仿真器
- Android主页Activity对多个Fragment实现不同的沉浸式标题(图片或者文字标题)
- 如何使用vs进行代码比较
- Bs4 BeautifulSoup取值
- syslog - 日志文件详解
- java hash表
热门文章
- IO流----读取文件,复制文件,追加/插入文件
- 三 单例模式【Singleton Pattern】  来自CBF4LIFE 的设计模式
- VS Code C++ 代码格式化(clang-format)
- 记一次 .NET 某数控机床控制程序 卡死分析
- KingbaseES TOAST存储方式
- 微信小程序语音提示
- Linux系统编程001--系统IO
- JS 模块化 - 03 AMD 规范与 Require JS
- 安装jumpserver 2.1.2版本遇到的坑
- ERP 与 CRM 之间有什么联系?