Lodash'ı içe aktarmanın doğru yolu

Aşağıda çekme isteği geribildirimi vardı, sadece lodash'ı içe aktarmanın doğru yolunun ne olduğunu merak ediyorum?

Ithalat 'lodash / has' vardır daha iyi yapardı .. kendi başına oldukça ağır olan lodash (v3) önceki sürümü için, tüm lodash kütüphanesini almak yerine sadece specidic bir modül / işlev almak gerekir. Daha yeni sürümden (v4) emin değilim.

import has from 'lodash/has';

vs

import { has } from 'lodash';

Teşekkürler

import has from 'lodash/has';daha iyi çünkü lodash tüm işlevlerini tek bir dosyada tutuyor, bu yüzden tüm 'lodash' kütüphanesini 100k'de içe aktarmak yerine has, belki de 2k olan lodash'ın işlevini içe aktarmak daha iyidir .

Kullanıyorsanız webpack 4, aşağıdaki kod ağaç sallanabilir.

import { has } from 'lodash-es';

Dikkat edilmesi gereken hususlar;

1. CommonJS modülleri ağaç sarsıntılı değildir lodash-es, bu nedenle lodash(CommonJS) yerine ES Modülleri olarak dışa aktarılan Lodash kütüphanesi olan kesinlikle kullanmalısınız .

2. lodash-es's package.json "sideEffects": false, paketin içindeki tüm dosyaların yan etkisiz olduğunu bildiren web paketini 4 bildirir (bkz. https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side - etkisiz ).

3. Modül paketleyicileri, dışa aktarılan üyeleri hiçbir yerde kullanılmasa bile muhtemelen yan etkiler içeren ağaç sallama dosyalarını kullanmadıklarından, bu bilgiler ağaç sallamak için çok önemlidir.

Düzenle

1.9.0 sürümünden itibaren, Parsel de destekler"sideEffects": false , bu nedenle import { has } from 'lodash-es';Parsel ile ağaç sallanabilir. O ES Modülleri sallayarak muhtemel bir ağaçtır göre CommonJS daha etkilidir olsa Ayrıca, ağaç sallama CommonJS modüllerini destekler Denemem .

Kıvırcık parantez içindeki belirli yöntemleri içe aktarma

import { map, tail, times, uniq } from 'lodash';

Artıları:

• Yalnızca bir içe aktarma satırı (makul miktarda işlev için)
• Daha okunabilir kullanım: daha sonra javascript kodunda _.map () yerine map () kullanın.

Eksileri:

• Her yeni bir işlev kullanmak istediğimizde veya başka bir işlev kullanmayı bıraktığımızda - bakımının yapılması ve yönetilmesi gerekir

Babel kullanıyorsanız, babel-plugin-lodash'ı kontrol etmelisiniz , sizin için kullandığınız lodash parçalarını kiraz, daha az güçlük ve daha küçük bir demet seçecektir.

Birkaç sınırlaması vardır :

• Lodash'ı yüklemek için ES2015 ithalatını kullanmalısınız
• Babel <6 ve Node.js <4 desteklenmiyor
• Zincir dizileri desteklenmez. Alternatifler için bu blog yayınına bakın .
• Modüler yöntem paketleri desteklenmez

Bunları şu şekilde içe aktarabilirsiniz:

import {concat, filter, orderBy} from 'lodash';

veya gibi

import concat from 'lodash/concat';
import orderBy from 'lodash/orderBy';
import filter from 'lodash/filter';

ikincisi ilkinden çok daha optimize edilmiştir çünkü sadece gerekli modülleri yükler

o zaman böyle kullan

pendingArray: concat(
                    orderBy(
                        filter(payload, obj => obj.flag),
                        ['flag'],
                        ['desc'],
                    ),
                    filter(payload, obj => !obj.flag),

Lodash'ı sürümde içe aktar 4.17.15

import * as _ from 'lodash';