浏览器请求资源时,使用本地缓存可以减少不必要的请求,从而提升页面加载速度,减少服务器压力。 通常使用文件名+文件内容hash值来命名文件,这样通过文件名就可以判断资源是否更新,从而保证缓存资源能够及时更新。
webpack内置了hashing功能,用来对打包资源进行版本信息标记的,从而实现最大化地利用缓存机制。
webpack提供了三种hash策略:
-
hash:项目级hash。整个项目文件hash值都是相同的。如果某个文件内容发生变化了,整个项目的hash值都会更新
-
chunkhash:模块级hash。根据不同入口进行依赖分析,同一入口的文件hash值是相同的。如果模块内某个文件的内容发生变化了,整个模块的hash值都会更新。
-
contenthash:文件级hash。文件的hash值跟文件内容有关。如果文件内容发生变化了,只会影响文件本身和父依赖的hash值。
应用场景:
-
chunkhash: 适用于output文件。不同入口文件及其依赖资源最终会被打包成独立的js文件,使用chunkhash可以保证output文件及时更新。 将业务模块和公共模块分开不同入口单独打包,改动业务模块时,不会影响公共模块的hash值。
-
contenthash: 适用于css文件。一般会把css提取为单独的文件,使用contenthash可以保证在css内容发生改变时,css文件本身和引用了css的js文件及时更新;而当js文件变化时,不影响css文件hash值。
-
hash:因为关联了整个项目所有文件,一般很少用。