Mapbox-gl-js: How to reduce bundle size of mapbox-gl?

[Stupidism]

I'm using create-react-app.

As you can see, the size of mapbox-gl is over a quater of my app.

[mourner]

We're working very hard on keeping the bundle as small as possible, but the fact is Mapbox GL is an extremely complicated piece of software that has to be somewhat big. We recently managed to reduce it a bit in #6196 (to 148KB minified/gzipped), but we can't get much lighter than that.

[Stupidism]

It's huge progress from 500KB to 148KB! Is it released yet?

[Scarysize]

@Stupidism The current release already is only 168kb (gzipped & minified). What you are showing in your screenshot above is the unminified version.

Check the size here: https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js

[sheerun]

Maybe you could release few bundles with heavy features disabled?

[Cam]

This should be reopened. The minified version is 671KB. That's too big for most projects.

[mourner]

The current bundle is 169 KB minified / gzipped, but the size is justified given the enormous complexity of the project. We put a lot of effort into keeping it as small as possible, but you can't get much lower than this. We might consider modularizing the build, but it's not like there are several "heavy" features that take a lot of size — it's just that there are hundreds of little things that aren't easy to take away but add up, so modularizing won't help much.

If you're up to exploring the bundle size yourself, please welcome! Maybe you'll find something we haven't thought of yet — we're looking forward to any PRs with improvements.

[Cam]

It's not always possible to use a gzipped resource. So realistically the library does currently come in at 671KB.

I don't think anyone is denying the complexity or criticising the current work. It's great work. It is however quite heavy. Especially when only basic features are required for a project.

Right now I'm having to switch to an alternative due to the weight of the entire library. I'd much prefer to be using Mapbox GL.

Personally I think I modularised library makes a lot of sense. Surely (though, as one who doesn't like to assume, I'd hope this is taken as "hopefully") elements like user geolocating and directions are substantial components.

I'm far from being an expert in either this library or the modularisation of modern Javascript. But I'll certainly try to find time to take a look at some point.

EDIT: I personally think this is an issue that should be left open until some resolution is found.

[cs09g]

It's a bit side from the bundle size thing, but one .pbf size is about 50kb(huge) already, so the library for 500kb with powerful functionalities is somewhat fair enough. But if it could be lighter, much better. and I believe there must be a way of splitting the library.

[olso]

This is too big, what are the alternatives here?

[mourner]

This is too big, what are the alternatives here?

@olso the alternative is to use ordinary raster tiles and Leaflet.

Surely (though, as one who doesn't like to assume, I'd hope this is taken as "hopefully") elements like user geolocating and directions are substantial components.

@Cam unfortunately not. GL JS doesn't have a directions component (there is a plugin though), and geolocation is a native browser API around which GL JS has a very tiny wrapper. We will try to modularize the code in future, but it's unlikely to bring much bundle size benefit — most code is taken by all the logic necessary to render basic components of a base map (lines, polygons, labels and icons).

[ChristAsselin]

This is too big, what are the alternatives here?

@olso the alternative is to use ordinary raster tiles and Leaflet.

@mourner This isn't an alternative if we require using Map Load instead of tiles. :(

[olso]

Hmm https://bundlephobia.com/[email protected]

[mourner]

@olso if you look closely, you can notice that 1.9.0 actually got a little smaller than 1.8.1 despite bringing some really cool new features like the within expression.

[MSkred]

35M ./node_modules/mapbox-gl

[olso]

I've just applied lazy loading and separated mapbox into its own chunk

[MSkred]

@oslo How ? Do you have an example ?

[olso]

combination of https://loadable-components.com/ and https://github.com/twobin/react-lazyload

and https://hackernoon.com/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758

[MSkred]

@oslo I'm working with mapbox with the nuxt.js framework and I can't deploy my project because my zip is too heavy... The seconde biggest module is mapbox with 35 fu**ing MB……… I'm fighting with module mapbox for find an solution for minimize her size. The best solution actually is to not use npm i mapboxgl but to work with the cdn…………… But I'm not sure is a good idea for the user exprience

[MSkred]

Any better idea then to use cdn ?

[mourner]

@MSkred the NPM distribution contains many versions of the bundle — development, production, unminified production, strict-csp-compatible, original source code with flow types, etc. In your deployment script, you could just delete everything from node_modules/mapbox-gl except dist/mapbox-gl.js and dist/mapbox-gl.css which are 760KB combined (uncompressed).

[MSkred]

@mourner Thanks a lot ! If someone want the command

cd node_modules
sudo ln mapbox-gl/dist/mapbox-gl.js mapbox-gl/dist/mapbox-gl.css ./
rm -rf mapbox-gl
mkdir -p mapbox-gl/dist
mv mapbox-gl.js mapbox-gl.css mapbox-gl/dist
cd ..

[stevepepple]

@MSkred the NPM distribution contains many versions of the bundle — development, production, unminified production, strict-csp-compatible, original source code with flow types, etc. In your deployment script, you could just delete everything from node_modules/mapbox-gl except dist/mapbox-gl.js and dist/mapbox-gl.css which are 760KB combined (uncompressed).

This was a great suggestion and major help. Thanks @mourner !

[Radiergummi]

@mourner Granted I'd just like to show a fancy map with a few markers here and there, that's zoomable and pan-able, is there a more lightweight option available? Or did I just sum up the complex parts? 😄
We're going to use MapBox maps for some really cool stuff in some specific places of our application, but for the most part, it's just plain boring maps. Bundling the full MapBox GL library seems overkill; it's not just the bundle size, but the sheer time it takes the engine to evaluate and parse all that code (results from Lighthouse, ?optimize=true added to map style):

URL | Total CPU Time | Script Evaluation | Script Parse
-- | -- | -- | --
/mapbox.53312cd.js (app.example.com) | 1,803 ms | 1,657 ms | 26 ms

_Edit: For clarification, that's the webpack chunk for mapbox, probably got a bit of glue code in it, but that's negligible._