openlayers vector layer annihilating browser

Question

I am trying to render a layer with polygons so that I can utilise the snap-to feature in openlayers. This layer has got a lot of data, I had assumed utilising the strategy: ol.loadingstrategy.bbox would limit what it is trying load but it seems strange that at 1:4K it needs to download 78meg before assassinating my browser tab.

Any tips on getting this to work?

new ol.layer.Vector({
            title: 'topo',
            visible: true,
            renderMode: 'image',
            source: new ol.source.Vector({
            format: new ol.format.GeoJSON(),
                url: function(extent) {
                    return "site.com?typeName=my:layer&service=WFS&version=1.0.0&request=GetFeature&outputFormat=application%2Fjson";
                },
                params: {layers: "my:layer"},
                strategy: ol.loadingstrategy.bbox,
                crossOrigin: "Anonymous"
            }),
            style: new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: '#f00',
                    width: 1
                }),
                fill: new ol.style.Fill({
                    color: 'rgba(255,0,0,0.1)'
                })
            })
        })

Answer 1

It is not enough to define the loading strategy, you also have to include the current extent to the url. So, append the following code to the url:

'&bbox=' + extent.join() + ',EPSG:3857'

(or whatever EPSG/SRID you use)