如何在angular8 SSR上使用哈希文件添加动态链接标签预取

Question

我使用角度8作为SSR或通用角度，我们发现很难在主要角度文件中添加动态预取链接标签。

构建为ssr之后，代码会在index.html的末尾插入这样的行，

<script src="runtime.58b180e8c30580ec9ea9.js" defer></script><script src="polyfills-es5.ea80a4cb53fa86a5c510.js" nomodule defer></script><script src="polyfills.c8c0431bcdc0afdb2644.js" defer></script><script src="scripts.2bbb0f7e81eb835e1cea.js" defer></script><script src="vendor.e7551457890efc085d4b.js" defer></script><script src="main.80bdfc18f9240a3efe5c.js" defer></script></body>

</html>

但是，在头标签上，我们需要这样的东西

  <link rel="prefetch" as="script" href="/runtime.js">
  <link rel="prefetch" as="script" href="/polyfills-es5.js">
  <link rel="prefetch" as="script" href="/polyfills.js">
  <link rel="prefetch" as="script" href="/scripts.js">
  <link rel="prefetch" as="script" href="/vendor.js">

问题是，每个构建都将具有不同的哈希，因此我们需要一个选项来在呈现页面之前检测服务器上的哈希。

任何想法，我们如何做到这一点？

Angular 8作为SSR，带有express.js

Answer 1

您需要自定义webpack配置，以在构建阶段添加附加插件预加载所有脚本。

npm install --save-dev preload-webpack-plugin

PreloadWebpackPlugin：用于自动连接异步（和其他类型的JavaScript块，使用

以上插件将需要html-webpack-plugin，我认为该插件已经存在于angular-cli配置。

为了编写自定义Webpack配置，我们将需要@ angular-builders / custom-webpack

npm i @angular-builders/custom-webpack -D

Custom-webpack.config.ts

const PreloadWebpackPlugin = require('preload-webpack-plugin');

module.exports = {
  plugins: [
    new PreloadWebpackPlugin({
        rel: 'preload',
        as(entry) {
            if (/\.css$/.test(entry)) return 'style';
            return 'script';
        }
    })
  ]
};

此后，将您的自定义Webpack添加到angular.json文件。

"build": {
    "options": {
      "customWebpackConfig": {
        "path": "./custom-webpack.config.js",
        "replaceDuplicatePlugins": true
      }
}

有关更多信息：https://github.com/GoogleChromeLabs/preload-webpack-plugin