Question

我要缓存网站图标，就像在网站上缓存css / js / png一样，例如头标在将来很远的地方到期。但是我看不到该怎么做。我在favicon和angular上找到的所有文章都建议仅使用html页面中的链接，将favicon.ico放入资产中，然后使用资产生成器选项进行复制。

<link rel="icon" type="image/x-icon" href="favicon.ico">

这无法实现我想要的，因为该文件称为“ favicon.ico”。我希望它被称为“ favicon。[content hash] .ico”，同样，所有的js，css和png文件都是。

我找到了这篇文章How to change Angular CLI favicon，并尝试了其中一条注释中提到的faviconInitFactory方法。我认为这是解决此问题的“正确”方法，但这对我不起作用。

如果我仅使用此行，则angular会抱怨它不知道如何加载ico文件

const favicon = require('../assets/favicon.ico');


ERROR in ./src/assets/favicon.ico
Module parse failed: Unexpected character ' ' (1:0)
You may need an appropriate loader to handle this file type.

作为替代，我尝试使用这样的导入

import favicon from '!raw-loader!../assets/favicon.ico';

然后我使用了“ custom-webpack：browser”和一个webpack文件

module.exports = {
  module: {
    rules: [
      {
        test: /\..ico$/,
        use: [
          {
            loader: 'file-loader',
          }
        ]
      }
    ]
  }
}

这使我更进一步，但是当我运行该应用程序并加载页面时，当我尝试使用它们登录时

console.log(`setting favicon to ${favicon}`);

我得到“将favicon设置为”，然后得到一些unicode符号。我认为这意味着该文件已被二进制加载，而不是内联的base 64。我知道这是因为文件的内容很小（6kb），所以加载程序对其进行了内联。但是，它们实际上是作为二进制而不是base64加载的。

因此，我不想提供一个文件“ favicon.ico”，而是提供一个“ favicon。[content hash] .ico”。本文显示了如何动态引用此文件，但我看不到如何配置angular cli的加载程序以base 64或url加载。

Answer 1

没有人提出答案，我还没有找到答案。我能想到的最好的方法是手动执行该过程，即计算图标的md5，然后更新页面以查找此内容。如果图标更改了，那么我们可以更改名称，它就可以使用。

CertUtil -hashfile .\favicon.ico MD5
MD5 hash of .\favicon.ico:
b9aa7c338693424aae99599bec875b5f

然后，将文件重命名为“ favicon.b9aa7c338693424aae99599bec875b5f.ico”，并更新html页面以引用它。

<link rel="icon" type="image/x-icon" href="favicon.b9aa7c338693424aae99599bec875b5f.ico">

如何使角度cli允许我使用内容哈希作为其名称来加载收藏夹图标

1 个答案: