@react-google-maps/api - 加载地图阻塞了主线程

Question

我目前正在一个网站上工作，我在其中使用 google 地图来显示一些带有地点位置的标记。我正在使用这个 npm 包：https://www.npmjs.com/package/@react-google-maps/api。
问题是，当我使用 Google Insights (https://developers.google.com/speed/pagespeed/insights/) 进行站点审核时，我的移动性能非常低。大约50.

这被认为是一个问题，因为我使用的是 Next.js（版本 10.0.6）。桌面端的审核分数很好。

我认为，主要问题在于加载地图。此过程阻止我的网站大约 500 毫秒。很多。

Screen shot of an issue

这是我目前获取地图的方式：

我正在使用功能组件
我正在从@react-google-maps/api
Loading the map
Rendering the map（onLoad用于设置ref）

我已经尝试过 usingEffect（使用空数组），async/await 语法，没有任何帮助。

如有任何帮助，我将不胜感激。

亲切的问候，

巴尔泰克

Answer 1

虽然我不太熟悉 Google Insight 的工作原理，但直接加载脚本而不是依赖其他第 3 方库 (@react-google-maps/api) 可以证明是有益的并且应该减少延迟。

App.js


    import React, { Component } from 'react';
    import { render } from 'react-dom';
    import Map from './components/map';
    import "./style.css";
    
    class App extends Component {
     
      render() {
        return (
           <Map 
            id="myMap"
            options={{
              center: { lat: -33.8569, lng: 151.2152 },
              zoom: 8
            }}
          />
        );
      }
    }
    
    export default App;

map.js


    import React, { Component } from "react";
    import { render } from "react-dom";
    
    class Map extends Component {
      constructor(props) {
        super(props);
        this.state = {
          map: ""
        };
      }
    
      onScriptLoad() {
        this.state.map = new window.google.maps.Map(
          document.getElementById(this.props.id),
          this.props.options
        );
    
        var marker = new window.google.maps.Marker({
          position: { lat: -33.8569, lng: 151.2152 },
          map: this.state.map,
          title: "Hello Sydney!"
        });
    
        //adding markers by click
        this.state.map.addListener("click", e => {
          //Determine the location where the user has clicked.
          this.addMarker(e.latLng);
        });
      }
    
      componentDidMount() {
        if (!window.google) {
          var s = document.createElement("script");
          s.type = "text/javascript";
          s.src = `https://maps.google.com/maps/api/js?key=YOUR_API_KEY`;
          var x = document.getElementsByTagName("script")[0];
          x.parentNode.insertBefore(s, x);
          s.addEventListener("load", e => {
            this.onScriptLoad();
          });
        } else {
          this.onScriptLoad();
        }
      }
    
      addMarker(latLng) {
        var marker = new google.maps.Marker({
          position: latLng,
          map: this.state.map
        });
      }
    
      render() {
        return <div className="map" id={this.props.id} />;
      }
    }
    
    export default Map;

@react-google-maps/api - 加载地图阻塞了主线程

@react-google-maps/api - Loading map is blocking the main thread

performance

google-maps

reactjs

next.js