is version 2 bigger bundle?

[shaulgo]

Hey, I thought version 2 came to improve bundle size by using the lazy loading of players. But bundlephobia seems to disagree. Is there more too it?
thanks :)

https://bundlephobia.com/result?p=react-player@2.0.1

[cookpete]

My guess is that BundlePhobia doesn't factor in lazy loading. It probably just sees the require(…) statements in the compiled players index file and pulls in all the files for all players.

[ovbm]

That's how webpack works. I wanted to import only the FilePlayer, but it seems that option was removed in version 2. Here's the same app with import Fileplayer from 'react-player/lib/players/FilePlayer'; in 1.15.3:

[cookpete]

Ok so it seems like I haven't quite implemented lazy players correctly. Babel compiles these lines:

https://github.com/CookPete/react-player/blob/32bb251a60f1a6449bd20e6dcf4c7dbfaeab02b7/src/players/index.js#L46-L50

into this:

{
  key: 'youtube',
  canPlay: function canPlay(url) {
    return _patterns.MATCH_URL_YOUTUBE.test(url);
  },
  lazyPlayer: (0, _react.lazy)(function () {
    return Promise.resolve().then(function () {
      return _interopRequireWildcard(require('./YouTube'));
    });
  })
}

I'm guessing for lazy loading to work it need to remain as import(), eg:

{
  key: 'youtube',
  canPlay: function canPlay(url) {
    return _patterns.MATCH_URL_YOUTUBE.test(url);
  },
  lazyPlayer: (0, _react.lazy)(function () {
    return import('./YouTube');
  })
}

The problem is that every player is then added as a chunk to the build, as there's no way of knowing at build time what players will be used. Maybe that's ok, but maybe I need to consider bringing back individual player imports…

[shaulgo]

As far as I know, multiple chunks is the way it's supposed to be.

[cookpete]

@shaulgo Try building with react-player@2.0.2-beta.0 and let me know if that helps. It's built with @babel/plugin-proposal-dynamic-import excluded from the babel env preset, so the built files now have import() for lazy loading.

[shaulgo]

amazing :) works. Checked it on our app and it split it into chunks and worked out of the box. It also looks very very nice in bundlephobia.

[cookpete]

Good to know! I'll work on getting this out. @shaulgo @ovbm Can you forsee any issues leaving import() statements in the compiled code?

Relevant comment: babel/babel#10273 (comment)

[cookpete]

Note that from v2.2.0, the lazy loading version of ReactPlayer has moved to react-player/lazy. See MIGRATING.md for more info.

I'm not considering it a breaking change as things won't actually break – the only impact will be a slightly bigger bundle size until you start importing from react-player/lazy.

I've added clarification to the readme to only use it if your build pipeline supports dynamic import() statements.

It's also worth noting that the BundlePhobia size will now go back up to ~17kb gzipped as the default import still includes logic for all players.

[jayeshbharadva]

@cookpete @shaulgo I was reading the issue and new to this computer world.
So i created my project with
import ReactPlayer from 'react-player/lazy'
and now it loads 3 chunks
bytes 0-6533162/6533163
bytes 6520832-6533162/6533163
bytes 65536-6533162/6533163
can anyone explain if this will be it's behavior or there is a solution?