时间戳

首页 > 解决方案 > 如何从 react-snap 预渲染中排除对讲脚本

javascript - 如何从 react-snap 预渲染中排除对讲脚本

问题描述

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

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

我在 package.json 中设置了排除参数：
“reactSnap”：{“destination”：“build/pre-rendered”，“removeScriptTags”：true }，这排除了所有其他脚本。

对讲机在 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(){ic(arguments);};iq=[];ic=function(args){iqpush(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'/>

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

标签： javascriptprerenderintercomreact-snap

解决方案

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

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

然后只需将您的整个脚本放在一个if (!isPreRendering)块中即可。

推荐阅读