Add bundle statistics to maplibre-gl-js website (#6270)

* bundle stats

* move sentence

---------

Co-authored-by: wayofthefuture <[email protected]>

Author: wayofthefuture

CONTRIBUTING.md

@@ -165,9 +165,15 @@ To create a standalone build, run
 npm run build-prod
 npm run build-css
 ```
-
 Once those commands finish, you will have a standalone build at `dist/maplibre-gl.js` and `dist/maplibre-gl.css`
 
+## Analyze your Standalone Build
+
+MapLibre seeks to keep production bundle sizes small. If your changes involve substantial additions or changes to dependencies, the effects on bundle size can be visualized by running
+```bash
+npm run bundle-stats
+```
+
 ## Testing changes and Writing Documentation
 
 See [`docs/README.md`](./docs/README.md)

build/rollup_plugins.ts

@@ -7,6 +7,10 @@ import terser from '@rollup/plugin-terser';
 import strip from '@rollup/plugin-strip';
 import {type Plugin} from 'rollup';
 import json from '@rollup/plugin-json';
+import {visualizer} from 'rollup-plugin-visualizer';
+
+const {BUNDLE} = process.env;
+const stats = BUNDLE === 'stats';
 
 // Common set of plugins/transformations shared across different rollup
 // builds (main maplibre bundle, style-spec package, benchmarks bundle)
@@ -44,7 +48,19 @@ export const plugins = (production: boolean): Plugin[] => [
         // global keyword handling causes Webpack compatibility issues, so we disabled it:
         // https://github.com/mapbox/mapbox-gl-js/pull/6956
         ignoreGlobal: true
-    })
+    }),
+    // generate bundle stats in multiple formats (treemap, sunburst, etc...)
+    ...(stats ? (['treemap', 'sunburst', 'flamegraph', 'network'] as const).map(template =>
+        visualizer({
+            template: template,
+            title: `gl-js-${template}`,
+            filename: `staging/${template}.html`,
+            gzipSize: true,
+            brotliSize: true,
+            sourcemap: true,
+            open: true
+        })
+    ) : [])
 ].filter(Boolean) as Plugin[];
 
 export const watchStagingPlugin: Plugin = {

package-lock.json

@@ -114,6 +114,7 @@
     "react-dom": "^19.1.1",
     "rollup": "^4.46.2",
     "rollup-plugin-sourcemaps2": "^0.5.3",
+    "rollup-plugin-visualizer": "^6.0.3",
     "rw": "^1.3.3",
     "semver": "^7.7.2",
     "sharp": "^0.34.3",
@@ -147,6 +148,7 @@
     "watch-css": "postcss --watch -o dist/maplibre-gl.css src/css/maplibre-gl.css",
     "build-benchmarks": "npm run build-dev && rollup --configPlugin @rollup/plugin-typescript -c test/bench/rollup_config_benchmarks.ts",
     "watch-benchmarks": "rollup --configPlugin @rollup/plugin-typescript -c test/bench/rollup_config_benchmarks.ts --watch",
+    "bundle-stats": "rollup --configPlugin @rollup/plugin-typescript -c --environment BUILD:production,BUNDLE:stats",
     "spellcheck": "cspell",
     "start-server": "st --no-cache -H localhost --port 9966 .",
     "start-docs": "docker run --rm -it -p 8000:8000 -v ${PWD}:/docs squidfunk/mkdocs-material",