Google PageSpeed ​​Insights показывает неиспользуемый javascript, но он используется

Question

Javascripts, которые используются, но статистика скорости страницы Google показывает, что они не используются. В любом случае я могу его удалить. Здесь я показываю снимок экрана отчета PageSpeedInsight.

На скриншоте выше видно, что 8 файлов js не использовались. Но в моем приложении это привыкает.

Answer 1

ПРИМЕЧАНИЕ. Этот ответ вызван путаницей. OP не использует React, но отчет включает пример React. В любом случае это может быть полезно другим.

Если ваши компоненты загружаются динамически (только после запроса пользователя).

Ты можешь использовать React.lazy() как предлагается в отчете для разделения кода, чтобы вы не загружали большой пакет, когда в нем нет необходимости.

Это решение не для SSR.

ПЕРЕД:

import ComponentB from './ComponentB';

function ComponentA() {
  return (
    <>
        {/* After certain action probably like routes switch or any? */}
        <ComponentB />
    </>
  );
}

ПОСЛЕ:

import React, { lazy } from 'react';
const ComponentB = lazy(() => import("./ComponentB.js"));

function ComponentA() {
  return (
    <>
        {/* After certain action probably like routes switch or any? */}
        <ComponentB />
    </>
  );
}

Ссылка: https://reactjs.org/docs/code-splitting.html

Answer 2

Вы можете загружать свои файлы сценариев в прокрутке. Когда пользователь начинает прокручивать страницу вниз, вы добавляете тег скрипта к своей голове и снова удаляете прослушиватель событий.

Добавляйте только сценарии, которых нет в области просмотра в начале, например, рекапчи. Обычно они находятся внизу.

function dynamicLoad(url) {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = url;
  document.getElementsByTagName("head")[0].appendChild(script);
}
window.addEventListener("scroll", loadScripts);

function loadScripts() {
  //load here as many dynamic scripts as you want
  dynamicLoad("recaptcha url");
  dynamicLoad("facebook.net url");
  //end ------
  window.removeEventListener("scroll", loadScripts);
}