frontend-collective / frontend-collective/react-sortable-tree

[Discussion] Reducing Bundle Size

Open
#260 4 comments 1 reaction 0 assignees View on GitHub
discussion enhancement
Dominant language
JavaScript
Stars
5k
Forks
914
PR merge metrics
No merged PRs in 30d

Description

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.

```javascript
// 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?

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.