webpack构建缓存机制-hash介绍

前言

浏览器为了优化体验,会有缓存机制。如果浏览器判断当前资源没有更新,就不会去服务端下载,而是直接使用本地资源。在webpack的构建中,我们通常使用给文件添加后缀值来改名以及提取公共代码到不会改变的lib包中来解决新资源缓存问题。

hash & chunkhash & contenthash

输出文件名output Filenames

我们在webpack构建中通过配置filenames来决定输出的文件名,比如我们的配置如下

则打包出来的目录如下

可以看到, 打包出来的js名称对应的就是这样的规则,这里之所以name对应的是main, 是因为我们没有指定entry的key值,默认是main,否则就是相对于的key值。

hash

在上面,我们看到,我们配置的hash值,然后打包出的是一个长串字符串,这边的的长度我们可以指定,比如配置为

entry: ‘./src/index.js‘,
output: {
    filename: ‘[name].[hash:8].js‘,
    path: path.resolve(__dirname, ‘dist‘)
}

这样打包出来的就是8位的字符串,我们看到这边main模块打包出的和slove模块打包出的hash值是一样的,这个是什么原因呢?我们先来看一下官方对于hash的解释

模块标识符(module identifier)的 hash

这个不是很好理解,什么叫做模块标识符呢?我们知道对于webpack来说,它是一个打包编译的过程,也就是一个 compilation的过程,这个标识符,标识的就是这个打包的过程。这样就很好解释了模块标识符的概念就是在相同编译打包过程中的模块所共有的标识符,也就是说同一过程产出的产物的hash值都是一样的,也就解释了上面的过程。

但是这样会有很大的问题,因为我们不想改变css模块而去影响到js打包出来的名称,这样不利于我们去做缓存。那该怎么去解决这样的问题呢?

chunkhash

这时候我们就需要chunkhash出场来解决问题了,我们先来看一下官方对于chunkhash的解释

chunk 内容的 hash

我们知道chunk指代的是模块,顾名思义,chunkhash就是模块的hash,也就是根据模块内容计算的hash值。那这边我们css模块的修改和js模块就没有关系,我们看一下使用chunkhash打包出来的结果,配置如下:

entry: {
    main: ‘./src/index.js‘,
    slove: ‘./src/slove.js‘
},
output: {
    filename: ‘[name].[chunkhash].js‘,
    path: path.resolve(__dirname, ‘dist‘)
}

这时候打包出来的目录如图所示:

这时候我们看到main模块与slove模块的hash值是不同的,这样我们修改main中的内容就不会修改slove的名称,slove的缓存就可以继续使用了。但是,这时候我们发现,main模块中的css文件和js文件的hash值是相同的。如果我们修改了js的内容,css的打包名称也会改变,这是我们不需要的,所以我们怎么解决这个问题呢。

contenthash

从名称上我们可以知道,它是根据文件内容来定义hash值得,所以我们就可以使用插件extract-text-webpack-plugin定义的contenthash来打包。配置如下:

new MiniCssExtractPlugin({
    filename: "[name].[contenthash].css"
})

这样打包出来的结果是:

作者:JungleW
链接:https://www.jianshu.com/p/e609e7b55aa7
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

总结的一个方法:

const addHash = fname => {
    var r = fname;
    if (IS_DEV) return r;
    const name = "[name]";
    const index = fname.lastIndexOf(name);
    if (index !== -1) {
        const suffix = fname.substring(index + name.length);
        let hash = ‘hash‘
        if (suffix === ‘.js‘) {
            hash = ‘chunkhash‘
        } else if (suffix === ‘.css‘) {
            hash = ‘contenthash‘
        }
        r = fname.replace(name + suffix, `${name}.[${hash}:8]${suffix}`);
    }
    return r;
};引入的例子如下图:



原文地址:https://www.cnblogs.com/luckyXcc/p/10839471.html

时间: 2024-10-11 20:23:09

webpack构建缓存机制-hash介绍的相关文章

Varnish缓存机制详细介绍及简单配置

Varnish是一款高性能的开源HTTP加速器,其主要用来做为反向代理中的缓存服务器使用,但其实Varnish本身也是具有反向代理功能的,但在创建连接和维持连接上,与Nginx相比差距很大,现在有一个很流行的架构就是前端用Nginx作为反向代理,后面加Varnish缓存服务器为Web服务加速 在将Varnish前先谈谈我们的浏览器缓存机制,现在的浏览器基本都具有缓存功能,它能将我们以前访问过的静态内容和可进行缓存的动态内容缓存再本地,而后在下次访问相同资源时,如果可以确认Server端的资源未发

hibernate缓存机制详细介绍

hibernate的缓存机制,包括一级缓存(session级别).二级缓存(sessionFactory级别). 一:hibernate的 N+1问题 list()获得对象: 如果通过list()方法来获得对象,毫无疑问,hibernate会发出一条sql语句,将所有的对象查询出来,这点相信大家都能理解 Hibernate: select student0_.id as id2_, student0_.name as name2_, student0_.rid as rid2_, student

手把手教你构建 Android WebView 的缓存机制 & 资源预加载方案

前言 由于H5具备 开发周期短.灵活性好 的特点,所以现在 Android App大多嵌入了 Android Webview 组件进行 Hybrid 开发 但我知道你一定在烦恼 Android Webview 的性能问题,特别突出的是:加载速度慢 & 消耗流量 今天,我将针对 Android Webview 的性能问题,提出一些有效解决方案. 目录 1. Android WebView 存在什么性能问题? Android WebView 里 H5 页面加载速度慢 耗费流量 下面会详细介绍. 1.

Sql Server tempdb原理-缓存机制解析实践

Tempdb就像Sqlserver的临时仓库,各式各样的对象,数据在里面进行频繁计算,操作.大量的操作使得tempdb可能面临很大压力,tempdb中缓存的设计就是为了缓解这些压力.这次就为大家介绍下tempdb的缓存机制. 在介绍缓存机制前,先简单了解一下TempDB对象 一般我们把tempdb对象分为两种类型用户对象和内部对象.用户对象指通过显式T-sql来创造的对象(如临时表),内部对象指通过隐式T-sql创建的对象(Worktables) 注:在引入版本控制后,也可以此单独分类(DMV

Solr4.8.0源码分析(19)之缓存机制(二)

Solr4.8.0源码分析(19)之缓存机制(二) 前文<Solr4.8.0源码分析(18)之缓存机制(一)>介绍了Solr缓存的生命周期,重点介绍了Solr缓存的warn过程.本节将更深入的来介绍下Solr的四种缓存类型,以及两种SolrCache接口实现类. 1.SolrCache接口实现类 前文已经提到SolrCache有两种接口实现类:solr.search.LRUCache 和 solr.search.LRUCache. 那么两者具体有啥区别呢? 1.1 solr.search.LR

【Java基础】Hibernate的缓存机制以及延迟加载

上篇博客介绍了Hibernate的基本原理,在博客尾声的时候提到了Hibernate的缓存机制以及延迟加载问题,这篇博客我们继续,将这两部分的内容补充完. 首先说说Hibernate的缓存机制,我们都知道Hiernate有一级缓存.二级缓存,但是具体的机制原理了解的清楚吗?这里我们就来好好说说Hibernate的缓存机制.先说说为什么要用缓存机制?Hibernate是一个持久层框架,经常访问物理数据库,为了降低应用程序对数据源访问的频次,从而提高应用程度的运行性能.缓存内的数据是对物理数据源中的

[转] 使用memc-nginx和srcache-nginx模块构建高效透明的缓存机制

为了提高性能,几乎所有互联网应用都有缓存机制,其中Memcache是使用非常广泛的一个分布式缓存系统.众所周知,LAMP是非常经典的Web架构方式,但是随着Nginx的 成熟,越来越多的系统开始转型为LNMP(Linux+Nginx+MySQL+PHP with fpm),这是因为Nginx采用基于事件机制的I/O多路复用思想设计,在高并发情况下其性能远远优于默认采用prefork模式的Apache,另 外,相对于Apache,Nginx更轻量,同时拥有大量优秀的扩展模块,使得在Nginx上可以

webpack构建项目

webpack构建项目 源码戳这里 ps:每个案例对应相应的demo,例如"案例1"对应"demo1" 一.webpack基本功能及简单案例 安装webpack $ npm i webpack -g 基本功能 $ webpack -v 查看webpack版本号 $ webpack 最基本的启动webpack的方法 $ webpack -w 提供watch方法:实时进行打包更新 $ webpack -p 对打包后的文件进行压缩 $ webpack -d 提供sourc

深度解析浏览器的缓存机制

一.前言 缓存可以说是性能优化中简单高效的一种优化方式了.一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷. 对于一个数据请求来说,可以分为发起网络请求.后端处理.浏览器响应三个步骤.浏览器缓存可以帮助我们在第一和第三步骤中优化性能.比如说直接使用缓存而不发起请求,或者发起了请求但后端存储的数据和前端一致,那么就没有必要再将数据回传回来,这样就减少了响应数据. 接下来的内容中我们将通过缓存位置.缓存策略以及实际场景应用缓存策略来探