Selective player imports for decreasing bundle size
See original GitHub issueI’m using react-player within a larger react app using webpack for bundling. Is there any way to organize the imports in a way to selectively bundle only certain players, so that webpack can properly tree-shake out the unused players? Currently I’m only utilizing the file loading and youtube players, however all the players are bundled into prod build due to the players import in ReactPlayer
:
import players from './players'
Essentially what I’m looking for is either a specialized import (similar to what some of the react-router libs recommend):
import useScroll from 'react-router-scroll/lib/useScroll';
// instead of
import { useScroll } from 'react-router-scroll';
that may look like
import YouTubeReactPlayer from 'react-player/lib/?';
Or an API where the parent component explicitly states the Player types that the given URL could be
import FilePlayer from 'react-player/players/FilePlayer';
import YoutubePlayer from 'react-player/players/YoutubePlayer';
<ReactPlayer players={[YoutubePlayer, FilePlayer]} {...props} />
I realize this is a niche request since I’m to the point of micro-optimizing third party libraries, but figured I’d ask before digging further into it.
Issue Analytics
- State:
- Created 6 years ago
- Reactions:1
- Comments:8 (6 by maintainers)
Top GitHub Comments
Added in
1.2.0
. See readme section for details and example.This will happen automatically in 2.0.0 (lazy loading of relevant players), try out the alpha release: