[Discussion] Reducing Bundle Size

[brendanmoore]

Currently the target package is umd when built with webpack this means that when we subsequently use this library it is non-trivial for our bundlers to optimise or tree-shake away any unused parts of the library. There are some quick wins such as making third-party imports more specific. e.g.

// Changing this...
import { AutoSizer, List } from 'react-virtualized';  
// To this...
import { AutoSizer } from 'react-virtualized/dist/es/AutoSizer';
import { List } from 'react-virtualized/dist/es/List';  

In this example this would help bundlers (like webpack) tree-shake the react-virtualized library and keep the our app bundle sizes smaller.

Another really awesome thing to do and potentially more benificial would be to look adding esm (es modules) as another build target and have side-effects: false in the package.json. With this in place we could look at potentially hoisting out the optional internals such as NodeRendererDefault, PlaceholderRendererDefault and SortableTreeWithoutDndContext

Initially it could all be done in way that presents no breaking changes. What do you think?

[fritz-c]

I’m interested, but have no experience with such refinements. Is this something that you could implement for me, and I check off on?

FYI: The logic around generating treeIds and the drag and drop manager instance are probably obstacles to setting side effects to false.

[brendanmoore]

@fritz-c I have put together a work-in-progress PR on this if you have a moment would be cool if you could give me some feedback. Initially I have just switched to Rollup with a couple of babel tweaks to remove the webpack module padding and some babel duplication which has reduced size by ~36KB.

It appears that the drag and drop manager has no side effects that I can see. Which logic is it that made you think it might?

[hyperknot]

An other issue with bundle size is that simply adding react-sortable-tree adds 4 different kind of lodash builds to the bundle.

I've opened an issue in azuqua/react-dnd-scrollzone#33
I believe if dnd uses the full lodash package then all the dependencies should use it as well.

[lgromanowski]

Hi,
I have a project where:

$ NODE_ENV=production webpack --mode production --config config/webpack.production.config.js --env.NODE_ENV=production --json | webpack-bundle-size-analyzer

gives:

react-sortable-tree: 443.29 KB (15.3%)

which is quite big. I'm importing react-sorted-tree in following way:

import SortableTree from 'react-sortable-tree';

should I do it differently to reduce bundle size?