如何对Rails中的webpack打包进行缓存

Question

我有一个Rails 6应用程序，其中包含大量的供应商CSS和JS。这些CSS和JS很少会更改，我想让Rails将其缓存。

我创建了2个packs。一个包含来自供应商的所有导入内容，另一个包含我的应用程序JS的导入。我在head中同时使用javascript_packs_with_chunks_tag。

每当我修改应用程序的JS文件时，该pack的缓存就会失效，供应商的pack也一样！

这种行为似乎是正常的，因为我可以在新的Rails应用程序中重现它。

编辑：我可以通过关闭编译（webpacker.yml compile: false）并在单独的终端选项卡中运行webpack（./bin/webpack --watch --colors --progress）来解决新的Rails应用程序中的问题，但在我的应用程序中，我仍然遇到问题。看起来Webpack正在找到某个全局变量或关键字，将两个packs连接起来。不幸的是，Webpack日志和依赖图并未显示该“连接”。这绝对不是import。

- hrdwdmrbl

---

问题在于供应商资产的输出文件哈希值正在改变，即使内容没有改变。显然 webpack 添加了时间戳和其他内容，因此哈希值发生了变化。如果输出文件名（包括哈希值）不改变，则缓存将会起作用。Webpack 解决了这个问题（webpack.js.org/guides/caching/），因此可能可以通过 webpacker 适当地配置 webpack。 - Les Nightingill

那是另一个好的解决方案！这可能会防止浏览器每次都发出请求，从而允许缓存。但这仍然意味着Web服务器的行为不像我所期望的那样。你认为这可能是因为缓存组的原因吗？也许当缓存组中的任何内容发生变化时，整个组就会失效？ - hrdwdmrbl

我花了很长时间尝试使用splitChunks和cacheGroups，但是没有成功。Webpacker有些特殊的处理方式导致缓存行为不同。当我使用相同配置来运行Rails的Webpack时，缓存行为就更加良好。我希望能更好地理解这个问题。 - hrdwdmrbl

@LesNightingill 那些缓存控制配置确实可以作为另一种可行的解决方案。如果您在赏金到期之前添加该答案，我将授予您帮助的奖励。 但我仍然觉得我的问题没有得到回答，因为我仍然不理解webpacker缓存的工作原理以及为什么修改一个包时会使所有包无效。这是什么机制？为什么会这样？如何改变这种行为？ - hrdwdmrbl

我找到了一行文档描述了我的情况：“如果你想使用实时代码重新加载，或者你有足够多的JavaScript代码，按需编译太慢”，https://github.com/rails/webpacker#development不幸的是，它没有解释“按需编译”与缓存失效的关系。 - hrdwdmrbl

Answer 1

另一个解决方案是禁用编译webpacker.yml compile: false 并单独运行webpack $./bin/webpack --watch --colors --progress。

这里有文档https://github.com/rails/webpacker#development，其中说道：“如果[...]您有足够多的JavaScript需要按需编译，速度太慢...”。

我也不喜欢这个解决方案，因为它没有解释为什么需要这样做。问题不在于编译速度太慢，而在于缓存没有发生。尽管这个解决方案通常会同时解决缓存问题...

- hrdwdmrbl

Answer 2

我发现一个简单的解决方案是将供应商的CSS和JS移动到Sprockets而不是Webpack中。我不喜欢这个解决方案，但它有效。

要做到这一点，请使用Sprocket类型的包含语句

<%= javascript_include_tag 'vendor' %>
<%= stylesheet_link_tag 'vendor' %>

并将您的供应商JS和CSS放置在它们各自的app/assets文件夹中

- hrdwdmrbl

---

那怎么做呢？ - jamesc

Answer 3

将评论提升为答案...

虽然人们希望当供应商代码不改变时可以跳过编译，但事实并非如此。但是，如果内容不改变，则编译代码的文件名不应该*更改。

假设您已经获得了一个不会更改的文件名，那么正常的http缓存控制机制应该提供所需的缓存，即使供应商代码被不必要地编译。有关如何控制http缓存控制标头的参考资料，请单击这里。

*在webpack文档中存在一些歧义，其中建议某些版本可能会更改已编译的文件名（哈希值），即使代码未更改，也由于webpack添加了时间戳和其他内容。如果发现文件名哈希值正在更改，则（webpack文档）描述了可用的缓解措施。

- Les Nightingill

---

最好不要在没有引用、参考或突出重要部分的情况下链接外部来源（请阅读https://stackoverflow.com/help/how-to-answer）。您能简要描述一下您建议的修复/缓解措施是什么吗？ - Pere Joan Martorell