reactjs - 从 Lighthouse for Google Recaptcha 和 Google Maps API 解决 "Remove unused Javascript"的最正确方法

Question

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

其中一个改进机会是删除未使用的 Javascript，它解释了这一点:

Sorry, follow this link. I don't have 10 of reputation to post images :(

Sorry, follow this link. I don't have 10 of reputation to post images :( 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); 您直接指向 DOM，而在 React 中，您创建和操作虚拟 DOM (vDOM) 以避免高性能像这样的浏览器操作。此外，这些在 React 范围之外的操作(不使用钩子(Hook))可能会导致一些奇怪的行为，因为您可能会阻塞 React's hydration process .

  您可以使用 useRef 达到相同的效果钩子(Hook)，保持 React 的范围，refName.current(refName 是你的 id 应该应用 ref ) 其中包含与您的 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)。