Question

我正在运行一个有角度的应用程序，该应用程序在google页面见解中显示的得分非常低（移动设备为13，台式机为43）。我在Nginx服务器上运行此命令，所有压缩和缓存问题都从Nginx方面解决，但在页面洞察力方面仍然得分很低。页面中只有一幅图像，并且已经被压缩。

Erros将删除未使用的javascript和css文件。但是它们显示的错误文件是从有角度的生产版本生成的版本文件。我不知道该文件如何被使用。我在这里附上错误的屏幕截图。请帮助我解决这些问题。

Answer 1

不是文件未使用，而是文件中有很大一部分包含未执行/不需要呈现初始页面的代码。

您要做的是将JavaScript分为“必需”和“非必需”。

“基本”是呈现/使用“折叠上方”显示的所有内容（无需滚动显示的内容）所需的所有内容。其他所有内容都是“非必需的”，因为页面可以在没有页面的情况下呈现，并且可以在后台加载。

整个过程的重点是感知的速度，该网站可能需要花费相同的时间来整体加载，但是如果您像这样分割JS，它的加载速度似乎会更快，从而有助于转化率等。

要实现此目的，您要么必须手动找到所有必需的JS并将其分别打包，要么使用诸如tree-shaking之类的方法来删除未使用的代码，然后使用code-splitting首先提供高优先级的JS。（链接的文章是我在Angular中发现的第一篇有关代码拆分的文章，由于我不熟悉Angular工作流程，因此您必须进行自己的研究）。

延迟加载JS

下面是一种简单的方法，一旦您发现它可以一直回溯到IE9，就可以延迟加载任何非必需的JS。

var dfr = function () {
    var n1 = document.getElementById("ds");
    var r1 = document.createElement("div");
    r1.innerHTML = n1.textContent;
    document.body.appendChild(r1);
    n1.parentElement.removeChild(n1);
};

var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
if (raf)
    raf(function () {
        window.setTimeout(dfr, 0);
    });
else
    window.addEventListener("load", dfr);

<head>
  <noscript id="ds">
    <script src="some-script-that-is-not-essential.js"></script>
  </noscript>
</head>

Answer 2

问题是 Zone.js - Zone.js 在 google 页面速度上减慢了应用程序，我有同样的问题（多年来）。您也可以尝试通过禁用 polyfills 上的 zone.js，然后在资产上添加 zone.js 文件并加载为 index.html 上的脚本标记，您将看到问题，然后禁用 zone.js 标记和运行灯塔。

测试谷歌页面速度：

polyfill 中的正常 zone.js。
在 index.html（头部）上带有 script 标签的资产中的 Zone.js - 确保禁用 polyfills
在 polyfills 和/或 index.html 上禁用 zone.js

Google洞察力显示角度应用程序的性能非常低

2 个答案:

延迟加载JS