[英]How to add the GoogleChromeLabs input-first-delay polyfill to a React app
我一定遺漏了一些簡單的東西，但似乎無法讓 polyfill 用於測量我的 firebase 項目的第一個輸入延遲。
我已經按照此處的建議包含了縮小文件，然后在我的 HTML 的正文中，我也按照建議運行了代碼。
所以它看起來像：
<head>
<title>My website</title>
<!--first-input-delay-->
!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);
</head>
<body>
<!-- my react app -->
<div id="root"></div>
<script>
perfMetrics.onFirstInputDelay((delay, evt) => {
console.log("First Input Delay", delay)
console.log("Event details", evt)
})
</script>
</body>
當我包含控制台日志時，腳本按預期運行，控制台記錄數據，但它從未將其發送到 firebase。 如果我取出控制台日志（ perfMetrics.onFirstInputDelay() ），腳本將失敗並顯示TypeError: n is not a function 。
我應該如何將它添加到我的應用程序中？ 我應該以某種方式將跟蹤發送到 Firebase 嗎？ 我目前使用性能跟蹤，但不確定如何發送此特定事件，因為它沒有開始和停止時間。
解決方案類似於以下內容嗎？
const performance = firebase.performance()
performance.trace(onFirstInputDelay)
所以我做了一些愚蠢的事情。 我只需要包含 polyfill 並讓 Firebase SDK 處理 onFirstInputDelay 事件。
所以只要有這個就行了。
<head>
<title>My website</title>
<!--first-input-delay-->
!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);
</head>
<body>
<!-- my react app -->
<div id="root"></div>
</body>
如何在不彈出的情況下將 WebPack polyfill 添加到使用 React Create App 創建的 React App？
[英]How do I add WebPack polyfill to React App created with React Create App without ejecting?
如何模擬糟糕的首次輸入延遲（Web Core Vitals）分數？
[英]How to simulate a bad First Input Delay (Web Core Vitals) score?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.