时间戳

首页 > 解决方案 > 从 Lighthouse for Google Recaptcha 和 Google Maps API 解决“删除未使用的 Javascript”的最合适方法

reactjs - 从 Lighthouse for Google Recaptcha 和 Google Maps API 解决“删除未使用的 Javascript”的最合适方法

问题描述

我正在使用Gatsby 框架在 React 网页上工作，并且我正在使用 AWS 进行持续部署，同时获得了良好的页面速度值。

改进机会之一是删除未使用的 Javascript，它解释了这一点：

抱歉，请点击此链接。我没有 10 的声誉来发布图片:(

抱歉，请点击此链接。我没有 10 的声誉来发布图片:( x2

这是我创建地图的代码（使用@react-google-maps/api）：

    useEffect(() => {
        const loadScriptByURL = (id, url, callback) => {
        const isScriptExist = document.getElementById(id);
        
        if (!isScriptExist) {
            let script = document.createElement("script");
            script.type = "text/javascript";
            script.src = url;
            script.id = id;
            script.onload = function () {
            if (callback) callback();
            };
            document.body.appendChild(script);
        }
        
        if (isScriptExist && callback) callback();
        }
        
        loadScriptByURL("recaptcha-key", `https://www.google.com/recaptcha/api.js?render=${SITE_KEY}`, function () {
        console.log("Script loaded!");
        });
    }, []);

这是我调用recaptcha的代码：

        <LoadScript
            googleMapsApiKey='...'>
            <GoogleMap
                mapContainerClassName={styles.mapSection}
                center={defaultProps.center}
                zoom={defaultProps.zoom}
                onUnmount={() => {}}
                onLoad={() => {}}>
                <Marker position={markerLocation} onClick={infoToggleOpen}>
                    ...
                </Marker>
            </GoogleMap>
        </LoadScript>

解决这些插件的删除未使用的 Javascript错误的最正确方法（或最简单的方法）是什么？我该如何使用React.lazy()或loadable-components（因为我尝试过但对我不起作用）来解决这个问题？

标签： reactjsgatsbyrecaptchalighthousereact-google-maps

解决方案

除了一些评论：

  • 当const isScriptExist = document.getElementById(id);你在 React 中直接指向 DOM 时，你创建和操作一个虚拟 DOM (vDOM) 以避免像这样的浏览器的高性能操作。此外，这些在 React 范围之外的动作（不使用钩子）可能会导致一些奇怪的行为，因为您可能会阻塞React 的水合过程。

    你可以使用钩子达到同样的效果useRef，保持 React 的范围，refName.current（refName是你应该应用的id地方）它与你的.refdocument.getElementById

  • 正如您所说，保存的脚本 kB 毫无意义，尤其是utils.js尝试改进它们是一个好点。

UsingReact.lazy是一种异步加载（更多）组件的方法，以避免对浏览器的初始阻塞请求，从而更有效地加载组件。在你的情况下：

// import <LoadScript> from 'somewhere';
import <GoogleMap> from 'somewherex2';
import React, { Suspense } from 'react';

const LoadScript = React.lazy(() => import('./LoadScript'));

const YourComponentName=()=>(
       <>
        <Suspense fallback={<div>Loading...</div>}>
          <LoadScript
              googleMapsApiKey='...'>
              <GoogleMap
                  mapContainerClassName={styles.mapSection}
                  center={defaultProps.center}
                  zoom={defaultProps.zoom}
                  onUnmount={() => {}}
                  onLoad={() => {}}>
                  <Marker position={markerLocation} onClick={infoToggleOpen}>
                    ...
                  </Marker>
              </GoogleMap>
          </LoadScript>
        </Suspense>
      </>
)

您将需要对React.lazy和 导入的组件进行一些试验。请记住，React 允许您使用后备组件 ( Suspense)。

推荐阅读