Уменьшите влияние стороннего кода на React

Во многих проектах, созданных в Интернете, обычно установлено множество сторонних приложений. Одним из сторонних приложений, которое использовало мое веб-приложение, было Intercom.
Если вы собираетесь следовать официальному документу Intercom, это, вероятно, повлияет на скорость производительности вашей страницы.

Итак, способ, которым я придумал решение этой проблемы, заключался в использовании условного рендеринга в React.
Это очень просто, вы должны создать компонент, который будет отображать значок внутренней связи на странице, а затем по нажатию кнопки вы инициализируете сценарий внутренней связи.

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

import React, { useState, useEffect } from 'react';

function Intercom() {
const [lazyIntercomShow, setLazyIntercomShow] = useState(true);
useEffect(() => {
 if (window.Intercom) {
  setLazyIntercomShow(false);
 }
}, []);
const loadIntercom = () => {
  //Intercom code here ...
};
return (
  <>
   {lazyIntercomShow && (
     //Create a dummy Button same as Intercom button
     <div className="intercom-lazy" onClick={loadIntercom} /> 
   )}
  </>
 );
}
export default Intercom;