带有指纹资产的 Chrome 工作区答案

【问题标题】：Chrome workspaces with fingerprinted assets带有指纹资产的 Chrome 工作区
【发布时间】：2014-05-30 12:09:14
【问题描述】：

Chrome workspaces: 假设我将本地 CSS 文件映射到本地 http 服务器提供的文件。一切正常，我可以在浏览器中修改文件，刷新页面后我的更改仍然存在。

我们碰巧对我们的资产进行了指纹识别，以便通过 styles.css?longuniquehash 等 URL 引用它们。很好的做法 - 这样我们可以使用积极的缓存并确保客户端将使用最新的资产。

但是，这对工作空间有点适得其反，因为每当更新 url 时映射就会丢失。简而言之：我们将styles.css?123 映射到本地资源，我们对其进行更改并在页面刷新时返回为styles.css?234，必须再次映射。

我们使用的是cassette，但该问题可以在任何带有指纹识别的设置上重现。是否有我缺少的设置或解决方法？

【问题讨论】：

你可以试试html5rocks.com/en/tutorials/developertools/sourcemaps 但是，卡带不支持 - 问题仍处于打开状态。也可能值得研究 chrome 扩展 api - 例如在请求之前重写 url..
@bushed：嗯，好点子，我没有想过在这种情况下使用源映射来实现 css（可能更少/sass）！

标签： css google-chrome bundling-and-minification developer-tools cassette

【解决方案1】：

根据 Chromium 的说法，在 Chrome 49 之前，对使用查询参数（即 style.css?123）映射 URL 的支持只是部分支持 - 它被完全删除。

如果您无法从代码中手动删除参数，临时解决方法是在页面加载后从 Chrome 检查器中的样式表引用中删除 ?123 参数。然后，您的工作区映射和自动刷新应该可以正常工作，直到您再次加载页面。

您可以在此处加注星标并关注此问题：bugs.chromium.org

【讨论】：

感谢您的链接，这很有用！在这种情况下更改链接 href 不起作用，因为修改它会看到从新 url 重新加载的资源 - 并且该 url 不会被缓存破坏。

【解决方案2】：

我假设您不在实时服务器上进行开发（如果您这样做，请停止并在您的本地计算机或至少在测试服务器上进行开发），因此您仅在您的实时环境中激活“缓存破坏器”。我们总是有一种快速的方法来检查我们在所有项目上运行的环境，因此只需在附加“？123”查询之前进行检查。我你没有在代码中解决这个问题，你也可以在你的 htacces 中添加它（如果你使用的是 apache）

SetEnvIf Host 'local.domain.com' runenv=local

RewriteCond %{ENV:runenv} ^local$
RewriteCond %{REQUEST_URI} .*\.css
RewriteCond %{QUERY_STRING} !^$
RewriteRule ^(.*)$ /$1? [R=301,L]

【讨论】：