duży plik geojson przy użyciu timeline

pytanie zadane 1 maja 2018 w JavaScript przez przemek141094 Nowicjusz (120 p.)

Buduje aplikacje internetową w której muszę odczytać bardzo duży plik geojson.

tak wygląda kod:

<html>
  <head>
	<meta harset = ' utf-8 '></meta>
    <title>Rozwój zabudowy miasta Olsztyna</title>
    <script src="https://mapbox.github.io/geojson-vt/geojson-vt-dev.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
    <script src="TimelineSliderControl.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css" rel="stylesheet">
    <link rel="stylesheet" href="normalize.css">
	<link rel="stylesheet" href="style.css">
    <script src="leaflet.timeline.js"></script>

    <style>
		    html, body{
        margin: 0;
        padding: 0;
      }

      #map{
        width: 100vw;
        height: 93vh;}
        .leaflet-control-container .leaflet-timeline-controls{
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        margin-bottom: 15px;
        position:absolut;}
      .leaflet-bottom.leaflet-left{
        width: 100%;}
     
   
    </style>
  
  </head>
  <body>
	  <div id ="preloader">
	  <div class="dot"></div>
	   <div class="dot"></div>
	    <div class="dot"></div>
	  </div>
	  
	  <body bgcolor="black"
	text="gray">
		<font 
		size="2"
		face='Helvetica'>
		  
		  
		<h1>
&nbsp; Rozwój zabudowy miasta Olsztyna

			</h1>
		</font>
    <div id="map"></div>

    <script>
    
      var map = L.map('map').setView([53.773056, 20.476111], 15);
		var CartoDB_DarkMatter = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png', {//crs: L.CRS.EPSG84,
	attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
	subdomains: 'abcd',
	maxZoom: 19
}).addTo( map );


       function onLoadData(data){
        var timeline = L.timeline(data, {
          style: function(data){
            return {
              stroke: true,
              color: 'green',
              fillOpacity: 0.5
            }
             var displayed = timeline.getDisplayed()
   	var highlight;
		var clearHighlight = function() {
			if (highlight) {
				vectorGrid.resetFeatureStyle(highlight);
			}
			highlight = null;
		};
		var vectorGrid = L.vectorGrid.slicer( displayed , {
			rendererFactory: L.svg.tile,
			interactive: true,
			
		})
	
		.addTo(map);
             
          },
          onEachFeature: function(feature, layer) {
            layer.bindTooltip(feature.properties.ID_BUDYNKU)
            },
          waitToUpdateMap: true
          
        });
       

        
        var timelineControl = L.timelineSliderControl({
          formatOutput: function(date){
            return moment(date).format("YYYY");
          },
          enableKeyboardControls: true,steps :100
           
         });
        timeline.addTo(map);
        timelineControl.addTo(map);
        timelineControl.addTimelines(timeline);
      }
    </script>
    <script src="dane.geojson"></script>
    <script src="main.js"></script>


  </body>
</html>

Co zrobić żeby przyspieszyć odczyt zmiennej timeline. Podobno można zrobić animacje ale jak ? Nie mogę uprościć obiektów w gejson. Plik waży około 14 MB.