如何从 react-snap prerender 中排除对讲脚本

Question

我想从 react-snap 预渲染构建中排除 Intercom 脚本（我认为是 JS 和 CSS，但是是 400KB 的字符串化代码）。

所有其他脚本已经被排除在外，但 Intercom 不能并且正在破坏我的预渲染和 SEO，并使预渲染的脚本比需要的大得多。

我在 package.json 中设置了排除参数：
“反应快照”：{ “目的地”：“构建/预渲染”， “removeScriptTags”：真 }, 这排除了所有其他脚本。

对讲在index.html中加载任一：

window.intercomSettings = { app_id: 'APP_ID' };

(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else {var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function (){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/ ' + 'APP_ID';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);};if(w.attachEvent){w.attachEvent('onload',l );}else{w.addEventListener('load',l,false);}}})();

或者子组件中的react-intercom组件通过：>Intercom appID= 'APP_ID'/>

任何帮助将不胜感激 - 谢谢

Answer 1

我遇到了完全相同的问题。您可以通过查看用户代理来检测预渲染：

function isPreRendering() {
    return navigator.userAgent === 'ReactSnap';
};

然后将上面的整个脚本放在一个

if (!isPreRendering)

块中。

Answer 2

@adevine 如果您想避免渲染某些元素，这也适用，谢谢！

const Component = () => {
    const isSnap = navigator.userAgent === 'ReactSnap'

    return (
      <div className="main">
        <>
          { !isSnap && <ComponentToKeepDynamic /> }
        </>
      </div>
    );
  };

export default Component;