Webpack deterministic modules ids优化中long term caching含义咨询

什么是long term caching（长期缓存） #

你理解的没错，这里的缓存就是指浏览器静态资源缓存。长期缓存是前端生产环境的核心优化手段之一，目标是让没有发生代码变更的静态资源，能尽可能长时间地保留在用户的本地浏览器缓存中，用户后续访问站点时不需要重复从服务器下载未改动的资源，既能大幅提升页面加载速度，也能降低服务器带宽消耗。

固定模块id对长期缓存的作用 #

生产环境下我们通常会给打包输出的JS文件名添加[contenthash]哈希标记，比如main.7a2f9b.js，只要文件内容发生变化，哈希值就会更新，浏览器就会主动拉取新的资源；如果文件内容不变，哈希值就不变，浏览器会直接使用本地缓存的文件。

在webpack没有启用deterministic模块id策略之前，默认用递增数字作为模块id：

• 假如你新增/删除了一个模块，所有后续模块的id都会整体向后顺延/向前挪动
• 哪怕很多模块本身的代码完全没有修改，仅仅是id发生了变化，也会导致打包后的文件内容变化，对应的contenthash也会更新，最终让本可以生效的缓存直接失效

而你例子里的testA.js固定分配id为812，启用deterministic策略后，只要这个模块本身的文件路径、内容没有发生变更，不管你后续新增、删除多少其他模块，它的id永远是812，这个模块的编译输出内容就不会变，对应chunk的contenthash也不会改变，用户浏览器里的缓存就能一直生效。

内容的提问来源于stack exchange，提问作者Nick