时间戳

首页 > 解决方案 > @react-google-maps/api - 加载地图阻塞了主线程

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

问题描述

我目前正在一个网站上工作，在那里我使用谷歌地图来显示一些带有地点位置的标记。我正在使用这个 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 毫秒。这是很多。

问题的屏幕截图

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

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

我将非常感谢任何帮助。

亲切的问候，

巴特克

标签： reactjsperformancegoogle-mapsnext.js

解决方案

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

应用程序.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;

地图.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;

推荐阅读