Entry Points & Bundle Optimisation

Mango Entry Points & Bundle Optimisation

Mango uses a modular build configuration to optimise load times and keep bundle sizes small for various consumer types.

Mango compiles separate JavaScript modules tailored for specific feature subsets. This allows npm package consumers to import only what they need:

Import Target	Output Bundle	Contents / Purpose
`@mango/iiif-viewer`	`index.js`	Core read-only IIIF viewer layout and controls.
`@mango/iiif-viewer/story-viewer`	`story-viewer.js`	Viewer layout plus narration/chapter audio timeline playback components.
`@mango/iiif-viewer/story-builder`	`story-builder.js`	Interactive story authoring panels, narrative editors, and local configuration exporters.
`@mango/iiif-viewer/annotation-editor`	`annotation-editor.js`	Vector drawing canvases and metadata table editors.
`@mango/iiif-viewer/all`	`all.js`	Heavy convenience package containing all features pre-bundled.

For browser script tags and Web Component users, Mango registers a custom element <mango-viewer> via src/lib/element.ts.

Rather than bundling all code together, the entry file element.js (~11KB) acts as a lightweight loader:

It registers the <mango-viewer> Custom Element tag.
It monitors the mode attribute (viewer | story-viewer | story-builder | annotation-editor).
It dynamically imports the compiled target mode bundle (e.g. import('./story-builder.js')) only when the element is mounted in that mode.

Heavy third-party rendering engines are completely code-split at the component level:

PDF documents: PdfRenderer.svelte dynamically imports the pdfjs-dist package (~2MB) only when loading a PDF canvas.
Deep-zoom images: OSDViewer.svelte dynamically imports openseadragon (~600KB) only when viewing high-resolution images.
3D models: ModelRenderer.svelte is isolated in a separate chunk (ModelRenderer-*.js) so that @google/model-viewer / Three.js (~1.2MB) is never downloaded by standard image or audio readers.