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:
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.
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:
npm installnpm run build-index./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.
npx webpack --config config/webpack-config-legacy-build.mjs && npx cleancss --source-map src/ol/ol.css -o build/legacy/ol.cssBy only removing formats and sources I don't use, along with vector-tiles and webgl, ol.js is reduced from 1.2MB to 540kB.