我知道这可能听起来像是一个典型的应该被关闭的问题，但我遇到了难题，不知道在哪里寻找解决方案，因此希望我提供足够的细节，使得这个问题对于SO来说是可接受的。
我正在开发一个OpenLayers Web应用程序，可以通过这里访问。
它的源代码在这个github仓库中。
如果你从电脑上尝试这个应用程序，用户体验应该很好（至少这是我的个人经验）。
然而，当我从我的手机浏览器（Chrome，我的手机是Google Pixel 2）尝试时，它非常缓慢。
特别是，每次我尝试通过触摸屏幕与应用程序进行交互（例如导航地图），在我触摸屏幕和应用程序响应之间存在相当大的延迟。
我甚至尝试使用ChromeDevTools控制台检查网络控制台，通过USB电缆连接我的手机，但无法理解这种缓慢的原因。
一些细节：
我正在开发一个OpenLayers Web应用程序，可以通过这里访问。
它的源代码在这个github仓库中。
如果你从电脑上尝试这个应用程序，用户体验应该很好（至少这是我的个人经验）。
然而，当我从我的手机浏览器（Chrome，我的手机是Google Pixel 2）尝试时，它非常缓慢。
特别是，每次我尝试通过触摸屏幕与应用程序进行交互（例如导航地图），在我触摸屏幕和应用程序响应之间存在相当大的延迟。
我甚至尝试使用ChromeDevTools控制台检查网络控制台，通过USB电缆连接我的手机，但无法理解这种缓慢的原因。
一些细节：
- 我正在使用OpenLayers 6.2.1版本
- 我正在使用TypeScript开发这个应用程序
- 我正在使用parcel bundler将其打包到dist文件夹中
- 我将构建好的文件复制到我的服务器上以提供应用程序服务
唯一需要注意的是，构建好的文件有奇怪的名称，例如src.9f4704d2.css。
我猜这是在运行npm run build命令时由bundler（parcel）引起的。
但是，我真的不知道这是否可能会成为一个问题。
然而，如果有人可以帮我解决这个问题，我将非常感激。 此外，如果需要更多详细信息，我可以提供，但我的主要问题是我不知道确切的解决方法在哪里。
编辑1
@import规则可以嵌套，因此浏览器必须按系列加载和解析每个文件。
我不知道这是否是问题，但我将尝试使用多个<link>标签，看看性能是否会变得更好...
编辑2
@import 替换成多个 <link> 标签并没有解决问题。
编辑3（可能已经找到问题）
好的，我把问题缩小到了我正在创建的图层上。
实际上，我正在解析三个WMS URL，从中提取每个图层，并为每个图层添加一个带有ImageWMS源的新的ImageLayer到地图上。
我做的第一件事是使用TileImage和TileWMS代替ImageLayer和ImageWMS，这加速了应用程序。
相关代码如下：
import TileLayer from 'ol/layer/Tile';
import TileWMS from 'ol/source/TileWMS';
export class OperationalLayer{
private operationalLayer: TileLayer;
id: String;
constructor(url: string, name: string, id: string) {
const source = new TileWMS({
params: {'LAYERS': name},
url: url,
});
this.id = id;
this.operationalLayer = new TileLayer({
source: source,
})
}
getLayer() {
return this.operationalLayer;
}
}
然而，应用程序非常迟缓。
然后我尝试只使用一个URL，因此总共只添加了3个图层到我的地图中。
现在它可以接受地运行。
我认为主要问题是我需要专注于最佳策略来将我的图层添加到地图中：是一次性拥有所有WMS图层的ImageWMS，还是每个图层都有一个ImageWMS。
后者（也就是我正在做的），会让我轻松地打开/关闭每个图层；前者可能会更快。
或者有没有其他我没有考虑到的选择？