Minified OpenLayers without modules

Question

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.

Answer 1

I recently got minified OL builds for just the classes I required working at https://github.com/geographika/ol-mapserver?tab=readme-ov-file#custom-openlayers-build

First add in the classes you need to an index file:

import { Map, View } from 'ol';
import { getCenter } from 'ol/extent.js';
import Image from 'ol/layer/Image.js';
import ImageSource from 'ol/source/Image.js';
import { createLoader as createCgiLoader } from 'ol/source/mapserver.js';
import { createLoader as createWmsLoader } from 'ol/source/wms.js';

const ol = {
    extent: {
        getCenter
    },
    layer: {
        Image
    },
    source: {
        Image: ImageSource,

        mapserver: {
            createLoader: createCgiLoader
        },
        wms: {
            createLoader: createWmsLoader
        }
    },
    Map, View
};

export default ol;

Then using webpack and the following config:

const path = require('path');
const webpack = require('webpack');
const pkg = require('./package.json');
const olVersion = pkg.dependencies.ol;

const rootPath = path.resolve(__dirname, ''); // Define rootPath

module.exports = [
    {
        name: 'OpenLayers',
        entry: path.join(rootPath, 'ol.mjs'),
        devtool: 'source-map',
        mode: 'production',
        performance: {
            hints: false,
            maxEntrypointSize: 512000,
            maxAssetSize: 512000,
        },
        output: {
            path: path.resolve(__dirname, 'build'),
            filename: `ol-mapserver-${olVersion}.js`,
            library: 'ol',
            libraryTarget: 'umd',
            libraryExport: 'default',
        },
        plugins: [
            new webpack.BannerPlugin({
                banner: 'OpenLayers (https://openlayers.org/)\nCopyright 2005-present, OpenLayers Contributors All rights reserved.\nLicensed under BSD 2-Clause License (https://github.com/openlayers/openlayers/blob/main/LICENSE.md)',
            }),
        ],
        optimization: {
            minimize: true,
        }
    }
];

Finally:

npx webpack --config webpack.config.js

Answer 2

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.

5. 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.