3

我创建了一个简单的 Ionic 5 / Angular 9 项目。

然后使用www.scully.io做静态页面预渲染。

它运行良好,因为我可以在生成的 index.html 中看到预渲染的 html

问题是每个 ionic web 组件都是自定义 web 组件,在浏览器加载 index.html 和 ion-* 标签的阶段,它不知道它们是什么以及它们应该看起来如何导致:

在此处输入图像描述

我试图通过添加来解决这个问题:

<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>

但问题是上面的包(ionic.esm.js)是模块化的,它会触发其他 *.js 文件包被下载和评估,并且这种 js 评估已经在 index.html 正文被解析和呈现之后进行ionic.esm.js 完全“启动” - Angular 已准备好接管,因此预渲染看起来并不漂亮:)

问题:

  • 在完全下载/评估模块化 js 之前,有没有办法阻止 DOM 解析?
  • 或者在这种情况下是否有其他方法来处理自定义 Web 组件?
4

0 回答 0