Angular：在index.html中使用<link rel ="preload">生成Web Worker的预加载

Question

7

我有一个包含Web Worker实现的Angular应用程序（通过 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中，在构建时由实际文件名替换？

- kerosene

2

你不能在构建步骤之后完成这项任务吗？你可以编写一个脚本来查找该文件并将其注入HTML文件中，或者只需保留<link rel="prefetch" href="worker.js"/>，然后脚本会将文件名替换为正确的文件名。 - shehata

1

你使用的CLI版本是哪个？每当我运行“ng generate web-worker”时，它都会要求我指定文件名。 - Dino

2个回答

0

我不得不采取的方法是关闭文件名的输出哈希。在 angular.json 文件中：

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

这样可以得到简单的文件名。因此，生成的工作文件将是 worker.js。

- C.OG

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Indragith · Accepted Answer

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

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

默认情况下，Angular将直接将scripts数组中提到的文件注入到HTML中。如果您不想让Angular注入，可以按照以下方式传递配置对象：

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

在上述情况下，您可以更好地控制捆绑js文件的名称。由于您知道捆绑包的名称，因此可以直接在html中指定它。

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

希望这能帮到你。