Correct way to import lodash

Question

I had a pull request feedback below  just wondering which way is the correct way to import lodash      You d better do import has from  lodash has    For the earlier version   of lodash  v3  which by itself is pretty heavy  we should only import   a specidic module function rather than importing the whole lodash   library  Not sure about the newer version  v4     import has from  lodash has     vs  import   has   from  lodash     Thanks

User · Answer

If you are using babel  you should check out babel-plugin-lodash  it will cherry-pick the parts of lodash you are using for you  less hassle and a smaller bundle   It has a few limitations    You must use ES2015 imports to load Lodash Babel  lt  6  amp  Node js  lt  4 aren   t supported Chain sequences aren   t supported  See this blog post for alternatives  Modularized method packages aren   t supported

User · Answer

Import specific methods inside of curly brackets import   map  tail  times  uniq   from  lodash    Pros   Only one import line for a decent amount of functions  More readable usage  map   instead of   map   later in the javascript code   Cons   Every time we want to use a new function or stop using another  - it needs to be maintained and managed   Copied from The Correct Way to Import Lodash Libraries - A Benchmark article written by Alexander Chertkov

User · Answer

import has from  lodash has   is better because lodash holds all it s functions in a single file  so rather than import the whole  lodash  library at 100k  it s better to just import lodash s has function which is maybe 2k

User · Answer

If you are using webpack 4  the following code is tree shakable   import   has   from  lodash-es     The points to note    CommonJS modules are not tree shakable so you should definitely use lodash-es  which is the Lodash library exported as ES Modules  rather than lodash  CommonJS   lodash-es s package json contains  sideEffects   false  which notifies webpack 4 that all the files inside the package are side effect free  see https   webpack js org guides tree-shaking  mark-the-file-as-side-effect-free   This information is crucial for tree shaking since module bundlers do not tree shake files which possibly contain side effects even if their exported members are not used in anywhere    Edit  As of version 1 9 0  Parcel also supports  sideEffects   false  threrefore import   has   from  lodash-es   is also tree shakable with Parcel  It also supports tree shaking CommonJS modules  though it is likely tree shaking of ES Modules is more efficient than CommonJS according to my experiment

User · Answer

You can import them as   import  concat  filter  orderBy  from  lodash     or as  import concat from  lodash concat   import orderBy from  lodash orderBy   import filter from  lodash filter     the second one is much optimized than the first because it only loads the needed modules  then use like this  pendingArray  concat                      orderBy                          filter payload  obj   gt  obj flag                             flag                              desc                                               filter payload  obj   gt   obj flag

User · Answer

I just put them in their own file and export it for node and webpack     lodash-cherries js module exports       defaults  require  lodash defaults      isNil  require  lodash isNil      isObject  require  lodash isObject      isArray  require  lodash isArray      isFunction  require  lodash isFunction      isInteger  require  lodash isInteger      isBoolean  require  lodash isBoolean      keys  require  lodash keys      set  require  lodash set      get  require  lodash get

[javascript] Correct way to import lodash

Examples related to javascript

Examples related to lodash

Examples related to babeljs