search

gajus / swing

A swipeable cards interface. The swipe-left/swipe-right for yes/no input. As seen in apps like Jelly and Tinder.
Other
2.63k stars 247 forks source link

Use specific lodash functions imports to enable tree shaking #140

Closed qnp closed 4 years ago

qnp commented 4 years ago

This allows to reduce final bundle size

gajus commented 4 years ago

Use tree-shaking.

qnp commented 4 years ago

Example in a project depending on 'swing', using webpack as a build system and webpack-bundle-analyser plugin:

Before

Capture d’écran 2019-10-25 à 15 38 01

After

Capture d’écran 2019-10-25 à 15 37 46

qnp commented 4 years ago

Tree shaking was not possible due to current import syntax.

c.f. https://www.azavea.com/blog/2019/03/07/lessons-on-tree-shaking-lodash/

Tree-shaking is syntax-sensitive. To enable tree-shaking in lodash, you have to import functions using syntax like import foo from 'lodash/foo'. import { foo } from 'lodash' will not tree-shake, nor will, obviously, import _ from 'lodash'. Support for this syntax was implemented in Lodash v4.

gajus commented 4 years ago

A better solution would be https://github.com/lodash/babel-plugin-lodash.

PRs like this require that everyone is magically aware of this requirement.

qnp commented 4 years ago

141