What changed between 0.1.1 and 1.0.0-alpha.3? about react-window

[bvaughn]

It's literally just an empty create-react-app shell with this added to App.js:

// Added to the header:
import { FixedSizeList as List } from 'react-window';
 
// Added as a new child to the <App> component:
<List
  height={150}
  itemCount={1000}
  itemSize={35}
  width={300}
>
  {({ index, style }) => (
    <div style={style}>
      Row {index}
    </div>
  )}
</List>

[bvaughn]

The 0.1.1 release you reference was nothing. 92b is too small to be anything interesting. It was just a placeholder release from the person who used to hold this package name. You can see this for yourself:
https://unpkg.com/[email protected]/lib/

This lib has nothing to do with react-tiny-virtualized-list. So the size comparison isn't that meaningful.

This lib is structured to be smaller if you only use some of its components, so looking at the full size via bundle phobia isn't all that meaningful a stat.

Anyway, this is an alpha still too, so this is probably all a bit premature. :)

[bvaughn]

I also want to point out that the NPM package for react-window hasn't been minified or envified yet. This is intentional, because it has special DEV mode validation and warnings.

Like React itself, you'll want to minify+envify your app anyway, which will make react-window much smaller.

So don't read too much into bundle phobia size stats

[kennetpostigo]

@bvaughn yea that makes sense, I was just curious 😄. I was under the impression that bundlephobia set the env to production, and it does show the size when minified.

[bvaughn]

Sorry for the quick replies last night. I was on my mobile phone.

That's fair! Bundle Phobia is doing some minification to get to that number because the raw CJS bundle in NPM is 62.51 kB, and Bundle Phobia says that [email protected] is 5.3kB "minified + gzipped".

But that number still seems a bit vague to me, because react-window has multiple components. So how is Bundle Phobia specifying which exports to use?

To test this myself, I made a new create-react-app build:

File sizes after gzip:

  36.94 KB  build/static/js/main.a0b7d8d3.js
  299 B     build/static/css/main.c17080f1.css

Then I installed react-window@alpha and plugged in FixedSizeList:

File sizes after gzip:

  41.52 KB (+4.58 KB)  build/static/js/main.2b4eba24.js
  299 B                build/static/css/main.c17080f1.css

So it looks like the added cost 4.58 KB (including the code I added to App.js to actually use the list). But looking at the built bundle, I see it contains more than just the FixedSizeList component– it also contains VariableSizeList and both FixedSizeGrid and VariableSizeGrid– so this is still kind of a worst case scenario. Tree shaking isn't working correctly for the build.

By manually mucking around a bit to strip out the un-used list and grid implementations, we can shave another 2.25 KB off of the minified + gzipped size, bringing the new added size to 2.33 KB.

File sizes after gzip:

  39.27 KB (-2.25 KB)  build/static/js/main.4e15cf18.js
  299 B                build/static/css/main.c17080f1.css

I'm not sure how much of the tree-shaking issue will be improved by the upcoming react-scripts@next release (which updates to Webpack 4) and how much will require changes to the react-window bundle. If this is something you're knowledgable about, I'd love to have your help!

[kennetpostigo]

@bvaughn I'd be glad to help :)

[bvaughn]

Fantastic!

[kennetpostigo]

Do you think you can publish your CRA test project to github that you mentioned above? I Want to use it to test a branch i'll work off of.

[bvaughn]

By the way! I just re-test this with the latest react-window release (1.0.2) and size increase after adding FixedSizeList is +2.26 KB thanks to a few build optimizations.