React-Mapbox-GL大大降低了整个应用的速度

Question

我正在尝试使用ReactJS和React-Mapbox-GL构建应用。

我有一个组件，其中的某些内容具有使用react-typing-animation进行打字的动画。

此后，我有了一个Map组件，但是一旦将此组件导入到我的应用程序中，整个应用程序和浏览器现在就会运行得非常慢。

我没有错误，只有（主要是）超时警告。下面的屏幕截图。

我已经通过Google搜索了几个小时，但很遗憾，没有找到任何东西。下面的代码由react-mapbox-gl的npm安装页面提供。

MapSection组件

import React, { Component } from 'react';
import ReactMapboxGl, { Layer, Feature } from "react-mapbox-gl";
const Map = ReactMapboxGl({
    accessToken: "myaccesstoken"
  });



export class MapSection extends Component {


    render() {

        return( 
            <div>
                <Map
                style="mapbox://styles/mapbox/streets-v9"
                containerStyle={{
                    height: "100vh",
                    width: "100vh"
                }}>
                    <Layer
                    type="symbol"
                    id="marker"
                    layout={{ "icon-image": "marker-15" }}>
                    <Feature coordinates={[-0.481747846041145, 51.3233379650232]}/>
                    </Layer>
                </Map>
            </div>
        );
    }
}

期望地图能够正常工作（它确实可以做到），但又不会减慢我的App（和浏览器）的运行速度。

*更新* 当我取出动画打字组件时，地图可以正常工作。所以它在某种程度上与react-typing-animation冲突，并破坏了该应用程序