从 Lighthouse for Google Recaptcha 和 Google Maps API 中解决“删除未使用的 Javascript”的最正确方法

Question

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

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

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

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

这是我创建 map 的代码（使用@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 （因为我尝试过但对我不起作用）来解决这个问题？

Answer 1

除了一些评论：

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

  您可以使用useRef钩子实现相同的效果，保留 React 的 scope， refName.current （ refName是您应该应用ref的id ），它与您的document.getElementById拥有完全相同的信息。

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

使用React.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 ）。