Cara yang benar untuk mengimpor lodash

Saya memiliki umpan balik permintaan tarik di bawah ini, hanya bertanya-tanya di mana cara yang benar untuk mengimpor lodash?

Anda sebaiknya melakukan impor dari 'lodash / has' .. Untuk versi sebelumnya dari lodash (v3) yang dengan sendirinya cukup berat, kita hanya perlu mengimpor modul / fungsi tertentu daripada mengimpor seluruh perpustakaan lodash. Tidak yakin tentang versi yang lebih baru (v4).

import has from 'lodash/has';

vs.

import { has } from 'lodash';

Terima kasih

import has from 'lodash/has';lebih baik karena lodash menyimpan semua fungsinya dalam satu file, jadi daripada mengimpor seluruh perpustakaan 'lodash' pada 100k, lebih baik mengimpor hasfungsi lodash yang mungkin 2k.

Jika Anda menggunakan webpack 4, kode berikut ini dapat diguncang pohon.

import { has } from 'lodash-es';

Poin yang perlu diperhatikan;

1. Modul CommonJS bukanlah pohon yang dapat diguncang sehingga Anda harus menggunakan lodash-es, yang merupakan pustaka Lodash yang diekspor sebagai Modul ES, bukan lodash(CommonJS).

2. lodash-espackage.json berisi "sideEffects": false, yang memberi tahu webpack 4 bahwa semua file di dalam paket adalah efek samping gratis (lihat https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side -Efek bebas ).

3. Informasi ini sangat penting untuk pengocokan pohon karena modul bundler tidak membuat file kocok pohon yang mungkin mengandung efek samping bahkan jika anggota mereka yang diekspor tidak digunakan di mana pun.

Edit

Pada versi 1.9.0, Parcel juga mendukung"sideEffects": false , karena import { has } from 'lodash-es';itu pohon juga dapat diguncang dengan Parcel. Ini juga mendukung modul CommonJS yang mengguncang pohon, walaupun kemungkinan pohon yang mengguncang Modul ES lebih efisien daripada CommonJS menurut percobaan saya .

Impor metode khusus di dalam kurung keriting

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

Pro:

• Hanya satu jalur impor (untuk sejumlah fungsi yang layak)
• Penggunaan lebih mudah dibaca: map () bukan _.map () nanti dalam kode javascript.

Cons:

• Setiap kali kita ingin menggunakan fungsi baru atau berhenti menggunakan yang lain - itu perlu dipertahankan dan dikelola

Jika Anda menggunakan babel, Anda harus memeriksa babel-plugin-lodash , ia akan memilih bagian-bagian dari lodash yang Anda gunakan untuk Anda, lebih mudah dan lebih mudah.

Ini memiliki beberapa keterbatasan :

• Anda harus menggunakan impor ES2015 untuk memuat Lodash
• Babel <6 & Node.js <4 tidak didukung
• Urutan berantai tidak didukung. Lihat posting blog ini untuk alternatif.
• Paket metode termodulasi tidak didukung

Anda dapat mengimpornya sebagai

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

atau sebagai

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

yang kedua jauh lebih optimal daripada yang pertama karena hanya memuat modul yang diperlukan

maka gunakan seperti ini

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

Impor Lodash dalam versi 4.17.15

import * as _ from 'lodash';