Prefer lodash-es when using webpack
The lodash
package needs to be able to support all browsers, it uses es5 modules. The lodash-es
package uses es6 modules, allowing for it to be tree shaked by default in webpack v4.
This import declaration:
import {join} from 'lodash';
brings in the entire lodash file, all 70K.
This import declaration:
import {join} from 'lodash-es';
brings in just the join
module, which is less than 1K.
With both lodash builds you can just import the function directly:
import join from 'lodash/join';
But when using multiple lodash functions in a file you may prefer the previous import declarations to get it down to one line:
import {chunk, join, sortBy} from 'lodash-es';
If you have these declarations throughout your app, consider aliasing lodash
to lodash-es
in your webpack config as a quick fix.