Question

大家好。我正在React JS上写一个网站，需要使用Google Maps。找到了这个解决方案：google-maps-react 一切都会好起来的，但是我也想在``Google PageSpeed Insights''上取得好的结果。使用地图时，移动设备上的指示器下降到34-35，关闭时上升到65-67，但我知道65-67并不是最好的结果，但仍然比34-好35岁尝试使用：react-lazyload，但这没有帮助。

我还考虑了React.Lazy和Suspense的选项，但这都没有帮助。下面提供了带有地图的组件代码以及将其包装在Suspense和LazyLoad中的代码。

容器组件，带有LazyLoad和Suspense：

import React, {Suspense} from 'react';

/* Comnponents */
// import MyMap from './MyMap'

/* Libs */
import LazyLoad from 'react-lazyload';

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

const GoogleMap = (props) => {

    return(
            <Suspense fallback={<div>Fancy loading container!</div>}>
                <LazyLoad once>
                        <MyMap {...props} />
                </LazyLoad>
            </Suspense>
    )
}

export default GoogleMap

带有地图的组件：

import React,{ useEffect, useState} from 'react'

/* Libs */
import { Map, GoogleApiWrapper, Marker } from 'google-maps-react';

const MyMap = ({
        width="300px", 
        height="300px", 
        lat = 48.00, 
        lng = -122.00,
        zoom = 8,
        className,
        ...props
    }) => {
        let [cords, setCords] = useState({lat: lat, lng: lng})
        const mapStyles = {
            width: width, height: height
        }


        useEffect(()=>{
            if (lat !== cords.lat && lng !== cords.lng) {
                setCords({lat: lat, lng: lng})
            }
        }, [lat, lng, cords, setCords])

    return(
        <div className={className ? className : ""} style={{position: "relative", ...mapStyles, marginTop: "20px"}}>
                <Map google={props.google}
                    containerStyle={{width: "100%"}}
                    zoom={zoom}
                    style={mapStyles}
                    initialCenter={{ lat: cords.lat, lng: cords.lng}}
                    center={{ lat: cords.lat, lng: cords.lng}}
                    >

                            <Marker position={{ lat: cords.lat, lng: cords.lng}} />
                </Map>
        </div>
    );
}

export default GoogleApiWrapper({
    apiKey: '*my API*'
  })(MyMap);

使用Google Map时如何避免性能损失？

0 个答案: