question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Selective player imports for decreasing bundle size

See original GitHub issue

I’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:closed
  • Created 6 years ago
  • Reactions:1
  • Comments:8 (6 by maintainers)

github_iconTop GitHub Comments

2reactions
cookpetecommented, Feb 23, 2018

Added in 1.2.0. See readme section for details and example.

0reactions
cookpetecommented, Dec 26, 2019

This will happen automatically in 2.0.0 (lazy loading of relevant players), try out the alpha release:

npm install react-player@2.0.0-alpha.0
Read more comments on GitHub >

github_iconTop Results From Across the Web

Selective player imports for decreasing bundle size · Issue #311
I'm using react-player within a larger react app using webpack for bundling. Is there any way to organize the imports in a way...
Read more >
5 Methods to Reduce JavaScript Bundle Size - Bits and Pieces
In this article, I will discuss 5 techniques to reduce the JavaScript bundle size to avoid any performance bottlenecks.
Read more >
How to Reduce Your Vue.JS Bundle Size With Webpack
The first step was to remove vue-lodash from our package. json since it was not needed. Making this one change has reduced the...
Read more >
Decrease your Handsontable bundle size using modules
You can use the selective module imports feature in two easy steps. First, import the Handsontable component from handsontable/base instead of ...
Read more >
Update d3 to v4 to enable tree shaking (and reduce the size of ...
Updates d3 v3 to v4 and adds a custom made bundle that only includes only what... ... import { extent as d3Extent, max...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found