javascript - 在 javascript 中包含 base64 gzipped 样式表/图像？

Question

我知道您可以在 javascript 文件中以 base64 格式存储 css 和图像以及其他文件类型。然而，它们相当大......并且压缩后，它们缩小了很多，即使 base64 编码的开销约为 33%。

非gzip压缩，图片为data:image/gif;base64, data:image/jpeg, data:image/png, css为data:text/css;base64。那么，我可以/应该使用什么 mime 类型来包含 gzip 压缩的 css 或图像数据 URI？ (或者如果 gzip+base64 不能工作，我可以做任何其他压缩来减小字符串的大小，同时仍然将数据存储在 javascript 中吗？)

..编辑.. 我认为这个问题被误解了。我不是在问是否我应该在 javascript 中包含压缩的 base64 字符串。是的，我知道在大多数情况下，最好在服务器端对 javascript 和其他文件进行 gzip 压缩。但这不适用于用户脚本；用户脚本没有服务器，只包含一个文件。 Firefox 允许 @require 指令，但 Opera 和 Chrome 不允许，本地文件安全问题会在加载任何本地文件时发挥作用。因此，脚本所需的任何内容都必须是:1) 在网络上(慢)或 2) 嵌入到用户脚本中(大)。

现在这个问题假设大比慢更可取，但大并不意味着我们完全忽略有多大；如果它可以更小，那就是一个改进。

所以假设一个 base64 字符串被嵌入到 javascript 中，问题是如何使它成为有意义的东西。

或者:

1) atob() 可以在 javascript 中将原始 base64 编码的 gzip 转换为原始 gzip。 (atob 不需要知道媒体类型)。接下来的问题是如何解压缩原始 gzip 压缩的 css 或图像文件，以便可以将生成的输出输入到文档中。

或 2) 给定适当的媒体类型，浏览器至少在理论上(根据 datauri RFC)应该能够直接从 datauri 加载任何文件。 ""足以加载非 gzip 压缩的 css 样式表。这里的问题是什么链接类型属性和 datauri 媒体类型组合应该起作用(以及它适用于哪些浏览器)？对于用户脚本，最好是在 Opera、FF 和 Chrome 中工作的组合。

Answer 1

在 HTTP 中，压缩通常仅应用于传输以减少要传输的有效负载。这是由 Content-Encoding header field 完成的.

但是data URL scheme非常有限，您只能指定媒体类型:

dataurl    := "data:" [ mediatype ] [ ";base64" ] "," data

尽管您可以使用 multipart message ，大多数用户代理在 data URL 中不支持它们。描述这种多部分消息的附加数据是否不会超过您通过压缩实际有效负载而保护的数据也值得怀疑。

所以压缩data URL中的数据在理论上是可行的，但不切实际。最好简单地压缩 data URL 嵌入的整个文档。