Блог

Главная - Вопросы по программированию - Google PageSpeed Insights показывает неиспользуемый javascript, но он используется

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

#javascript #google-pagespeed #google-pagespeed-insights-api

#javascript #google-скорость страницы #google-pagespeed-insights-api

Вопрос:

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

GPSI

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

Комментарии:

1. Я полагаю, Google говорит вам, что он не нужен для начала страницы? Таким образом, вы можете решить загрузить его только при первом использовании. Это не говорит о том, что он полностью не используется, это говорит о том, что какой-то код в этих файлах не используется.

2. я думаю, это также говорит вам, что вы используете только части файлов. Он предлагает вам разделить файлы и импортировать только те фрагменты, которые вам действительно нужны.

3. вы можете динамически загружать файлы javascript. загрузите файлы с помощью прокрутки. и после того, как вы добавите их в тег head, удалите свой прослушиватель событий

4. «Есть ли в любом случае, я могу это удалить» — да, просто отредактируйте свою разметку и удалите <script> тег, который загружает этот файл. В противном случае, если это необходимо, просто игнорируйте предупреждения. Основная проблема может заключаться в том, что вы загружаете несколько файлов из нескольких доменов

5. @DhanushKumarS Можете ли вы поделиться более подробной информацией о том, как вы загружаете файлы скрипта? Чтобы ответы могли быть более конкретными.

Ответ №1:

ПРИМЕЧАНИЕ: Этот ответ вызван путаницей. Операционная система не использует 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

Комментарии:

1. Спасибо за ответ. Приложение разработано с использованием Django, КСТАТИ. Определенно, ваш ответ помогает для react.

2. Я подумал, что вы, возможно, использовали React для интерфейса из-за предложения из отчета. В любом случае, используете ли вы шаблоны Django по умолчанию? Что вы можете сделать, так это отложить загрузку скрипта, который не является необходимым для рендеринга страниц.

Ответ №2:

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

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

 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);
}

Комментарии:

1. Я думаю, что вместо события прокрутки мы можем загрузить остальную часть скрипта после завершения загрузки DOM.

2. @ashiish.me если вы сделаете это так, то вы можете поместить defer в атрибут script, его поведение почти такое же. это не решит его проблему, он все равно будет считаться неиспользуемым js-скриптом

3. я мог бы попробовать этот способ

4. Понял, это имеет смысл. Мне было интересно, нужна ли мне конкретная функция из JS, которая не находится вне области просмотра, но ее не обязательно загружать во время рендеринга.

5. @ashiish.me да, такие вещи, как recaptchas, обычно где-то внизу формы