Angular：index.html 中的 <link rel="preload"> 用于生成的网络工作者答案

【问题标题】：Angular: <link rel="preload"> in index.html for generated web workerAngular：index.html 中的 <link rel="preload"> 用于生成的网络工作者
【发布时间】：2019-11-28 09:58:20
【问题描述】：

我有一个 Angular 应用，其中包含 web worker 实现（通过 ng generate webWorker 生成）。

我想将给定的 web-worker 标记为预加载，如下所示：

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
   ...
    <link rel="prefetch" href="worker.js" />
   ...
  </head>
 ....
</html>

问题在于 worker.js 文件的名称是通过 Angular CLI 生成的，例如0.7841408a8c7c04e45900.worker.js（绑定自worker.ts）

有没有办法将文件名的占位符放入 index.html 中，在构建时替换为实际的文件名？

【问题讨论】：

在构建步骤之后你不能这样做吗？您可以使用一个脚本来查找该文件，然后将其注入 html 文件中，或者将<link rel="prefetch" href="worker.js" /> 留在那里，该脚本会将文件名替换为正确的文件名。
您使用的是哪个版本的 CLI？当我运行ng generate web-worker 时，它确实要求我指定文件名。 `

标签： angular preload

【解决方案1】：

在 angular.json 文件中，在脚本中提及 worker 文件路径部分。

build: {
    ...,
    options: {
        "scripts": ['./worker.js']
    }
}

默认情况下，Angular 会注入脚本中提到的文件数组直接进入html。如果您不希望角度注入您可以传递配置对象如下：

"scripts": [
  { 
    "input": "./worker.js", 
    "inject": false, 
    "bundleName": "worker" 
  }
]

在上述情况下，您可以对捆绑的 js 文件的名称有更多的控制权。由于您知道捆绑包的名称，因此可以直接在 html 中将其指定为

<link rel="prefetch" href="worker.js">

希望这会有所帮助。

【讨论】：

我的代码库中没有worker.js。它从worker.ts的Angular CLI（webpack）自动捆绑

【解决方案2】：

我不得不求助于关闭文件名的输出散列。在angular.json 文件中：

"configurations": {
  "production": {
    //..
    "outputHashing": "none",
    //...
  }
}

这样你就可以得到纯文件名。所以生成的worker文件将是worker.js。

【讨论】：