javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > webpack hash持久化

一文搞懂webpack hash持久化的原理

作者:chrisPaul101755

本文主要介绍了webpack hash持久化的原理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

理解 module、chunk 和 bundle

hash 的分类

hash

runtime 和 manifest

chunkhash

contentHash

webpack5

webpack5 对moduleIds & chunkIds的优化,不在是以数字作为id

optimization:{
    moduleIds:'deterministic',
    chunkIds:'deterministic'
},

如何使用 hash 做缓存呢?

很多人知道 hash,但是要不项目配置为 hash,不利于做长期缓存,要不前端配置好了,但是不知道如何配合后端做长期缓存,这就涉及到 http 缓存的

Etag - Last-Modified

Cache-control

Expires

静态资源服务器的缓存

max-age 配合 hash 做使用

在保持 hash 不变性的前提下,我们可以使用 max-age 来设置前端缓存

/* 具体设置多少,个人觉得要看升级的频率,在保证hash不变性的前提下,设置1y 比较合理https://expressjs.com/zh-cn/guide/using-middleware.html */
app.use(
  express.static(path.join(__dirname, "public"), {
    maxAge: "1y",
    expires: "1y",
    Etag: false,
    lastModified: false,
  })
);

参考文章

到此这篇关于一文搞懂webpack hash持久化的原理的文章就介绍到这了,更多相关webpack hash持久化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文