2

When working with openlayers, I use the plain JS (no modules) distribution by using

<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/build/ol.js">

or a local copy of ol.js and debug at will in my local browser.

When everything is working with declarations like

var map = new ol.Map({ ...});
var mySource = new ol.source.Vector();
etc ...

I'd like to be able to build a custom-ol.js smaller than ol.js containing just what I use.

I tried different approach without great success. Installing a development environment in Node with a simple main.js importing just what I need seemed a good solution:

import {Map, View} from 'ol';
import Vector from 'ol/layer/Vector';
...

However, when building with node as explained in https://openlayers.org/en/latest/doc/tutorials/bundle.html, using the numerous options offered (Vite, Webpack, RollUp, etc ...), I face one of these two issues:

  1. Either custom-ol.js is built as a module, and local development is no longer possible
  2. Or custom-ol.js is built as a plain JS file, without modules, but I can't have syntax like ol.source.Vector() working

I also tried to build Openlayers from source with 'npm run build-legacy', but it's cumbersome to try-and-error guess which source is to be excluded.

I really miss a good tutorial to manually build a minimal custom Openlayers library while keeping the ol.xxx.yyy-style declarations.

yvecai
  • 41
  • 3

1 Answers1

1

I had some time off and had some really good readings on Javascript. Yet, using modules when developing a small website is still a bit overkill for me, at least for the time being.

So here is what I did to obtain a smaller ol.js library:

  1. Fork OpenLayers
  2. Install dependencies with npm install
  3. Build index.js with npm run build-index
  4. Edit ./build/index.js to comment unnecessary exports
//~ import $ol$source$Raster from './ol/source/Raster.js';
import $ol$source$Source from './ol/source/Source.js';
//~ import $ol$source$Stamen from './ol/source/Stamen.js';
import $ol$source$Tile from './ol/source/Tile.js';
...
//~ ol.source.Raster = $ol$source$Raster;
//~ ol.source.Raster.Processor = _ol_source_Raster$Processor;
//~ ol.source.Raster.RasterSourceEvent = _ol_source_Raster$RasterSourceEvent;
//~ ol.source.Raster.newImageData = _ol_source_Raster$newImageData;
ol.source.Source = $ol$source$Source;
//~ ol.source.Stamen = $ol$source$Stamen;
ol.source.Tile = $ol$source$Tile;
...

It's a bit tedious, but efficient.

  1. Build the legacy ol.js flat file with npx webpack --config config/webpack-config-legacy-build.mjs && npx cleancss --source-map src/ol/ol.css -o build/legacy/ol.css

By only removing formats and sources I don't use, along with vector-tiles and webgl, ol.js is reduced from 1.2MB to 540kB.

yvecai
  • 41
  • 3