Using only specific loader type without importing whole spinner

[archansel]

Hi, is there any way to load only one specific loader without the whole spinner being bundled. Something like what lodash did, for example:

import BarLoader from 'react-spinners/bar-loader';

[ThomasBem]

Would also be interested in this! Currently react-spinners is 9% of our small apps total bundle size.

Love the spinners though! RingLoader is awesome :)

[davidhu2000]

@archansel @ThomasBem, I ran a quick test, looks you like can import just one.

import BarLoader from 'react-spinners/dist/spinners/BarLoader';

Trying to see how I can remove the /dist/spinners part`.

import { BarLoader } from 'react-spinners';: 51.23 KB
import BarLoader from 'react-spinners/dist/spinners/BarLoader';: 47.44 KB

The file sizes are the size after gzip. I used create-react-app and just added the loader and build the production build.

Can you guys give that a try and see if the bundle size is reduced?

[Dman757]

@davidhu2000 Figured I would chime in to confirm this worked on my end. I used source-map-explorer for a quick test. https://www.npmjs.com/package/source-map-explorer

I'm only using BarLoader and PulseLoader
import PulseLoader from 'react-spinners/dist/spinners/PulseLoader';
import BarLoader from 'react-spinners/dist/spinners/BarLoader';

Before

After

[davidhu2000]

@GuillaumeCisco Just merged in your PR, but looks like single loader import isn't working.

I'm looking at possible solutions, not sure why. I had to deprecate 0.4.0. We need to push out a patch for this.

[davidhu2000]

I just published a patch 0.4.1 that removes the single loader import from the readme. So hopefully very few people uses 0.4.0.

[davidhu2000]

looks like the issue is you need to import BarLoader from 'react-spinners/dist/BarLoader';

[GuillaumeCisco]

Dist folder should not exist. Check the way the build work.

…

-- Guillaume Cisco Le sam. 11 août 2018 à 06:26, David Hu <notifications@github.com> a écrit :

looks like the issue is you need to import BarLoader from 'react-spinners/dist/BarLoader'; — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#23 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABGgrEjTGOJn2Km37LoVXvGiycTuCZTkks5uPlzbgaJpZM4ROHlh> .

[davidhu2000]

This is fixed in >= 0.4.2

[ThomasBem]

We came back to our app recently where we use one of your spinners as our main loading animation. Updated to 0.4.3 and changed the import like you said and now our bundle size dropped by 50KB.

Just wanted to say thanks! 👍

[kifirkin]

@davidhu2000 Can't use this import method with typescript. I've got error: Could not find a declaration file for module 'react-spinners/GridLoader'.

[davidhu2000]

hmm, @alexmironof can you open a new issue? This feels like a different issue that the current issue.