Treeshaking and duplicate code in core/lightbox ESM modules

[danielvy]

It appears that photoswipe.esm.js and photoswipe-lightbox.esm.js modules have a lot of the same code. So when I import them as suggested in the docs:

import PhotoSwipeLightbox from 'photoswipe/lightbox';
import 'photoswipe/style.css';

const lightbox = new PhotoSwipeLightbox({
  gallery: '#my-gallery',
  children: 'a',
  pswpModule: () => import('photoswipe')
});
lightbox.init();

This produces many of the same functions in the final javascript. Treeshaking (I'm using Rollup) is not possible as these are seen as different code paths.

Using static imports:

import PhotoSwipeLightbox from 'photoswipe/lightbox';
import PhotoSwipe from 'photoswipe'; 

Gives an even larger size of ~250k (unminified). This is also not treeshakable.

The documentation says:

Lightbox (photoswipe-lightbox.esm.js) - loads Core and chooses when PhotoSwipe should be opened. Its file size is significantly smaller. It also loads the first image (in parallel with Core).

So do I have to import core again and pass a separate PhotoSwap to the lightbox? Am I missing something?

[dimsemenov]

The Lightbox inherits only a small fraction of the Core. It's mainly used to start loading the first image in parallel with the Core JS.

The script is intentionally split into two parts, so you can preload a large part of it separately and/or on-demand when a user actually needs the viewer.

[saas786]

@dimsemenov

The Lightbox inherits only a small fraction of the Core. It's mainly used to start loading the first image in parallel with the Core JS. The script is intentionally split into two parts, so you can preload a large part of it separately and/or on-demand when a user actually needs the viewer.

If there's any demo or documentation available, I'm interested in utilizing it.

Never mind, I didn't realize I was already handling it myself.

pswpModule: () => import('photoswipe')