react项目引入百度地图api报有警告：A parser-blocking, cross site (i.e. different eTLD+1) script

项目场景：

最近在写一个react项目，需要使用到百度地图API，于是去百度地图官网React-BMapGL添加地图API。

---

问题描述

首先引入脚本，在index.html中引入以下script，密钥可去百度地图开放平台官网申请。

本人引入的文件是：public/index.html

<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>

引入之后，地图加载不会出错，功能也完整。但是浏览器会报出警告：

A parser-blocking, cross site (i.e. different eTLD+1) script, http://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=您的密钥&services=&t=, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message.
See https://www.chromestatus.com/feature/5718547946799104 for more details.

翻译：

通过document.write调用一个解析器阻塞，跨站点(即不同的eTLD+1)脚本，http://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=“&services=&t=”。由于网络连接不良，对该脚本的网络请求可能会在当前或将来的页面加载中被浏览器阻止。如果在此页面加载中被阻塞，将在随后的控制台消息中进行确认。
详见https://www.chromestatus.com/feature/5718547946799104。

---

原因分析：

于是去提示的