Openlayers and Angular : How to use Web Worker to add vectoreLayers

I rarely post my problems since generally I find everything here but not this time unfortunately. here's my problem: i'm currently working on a navigable map that will display shapes. I recover the data via json from my database. my problem is that the result contains more than 200,000 figures. when I launch my function the app crash. I thought of web workers unfortunately I cannot import modules like (vectorlayers, WKT ... etc). if you know how to do it or if there is another alternative to offer me please. I already tried streaming with oboe the page does not crash completely but it remains unusable. here are the codes:

function to receive data :

public async list() {
// const url = `${this.baseUrl}/`;
return this.httpClient.get(this.baseUrl).toPromise().then(data => {
  return data;

});

function to add the vectorlayers :

export function DisplayPopup(map: Map, geom) {
const format = new WKT();
let features;

features = format.readFeature(converter.convert(geom), {
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857'
});
this.vectorLayer = new VectorLayer({
source: new VectorSource({
  features: [features]
}),
style: styleFunction
});
map.addLayer(this.vectorLayer);
}

And finally the function with the loop :

async OnGetgeomlist() {
const allbuilding = await this.buildService.list() as Buildings[] ;
allbuilding.forEach(build => {
  const house = new Buildings(build);
  new DisplayPopup(this.map, house.geom);
});
}