Cara yang benar untuk mengimpor lodash


185

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


4
Lihat jawaban ini untuk diskusi yang lebih mendalam tentang mengapa yang terakhir masih dapat menimbulkan optimasi kinerja di beberapa lingkungan seperti Webpack. Ini karena penggunaan analisis statis dan pengocokan pohon.
Patrick Roberts

Jawaban:


244

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.


1
@ GeorgeKatsanos Anda baru saja mengimpor fungsi yang ingin Anda gunakan, Anda tidak perlu '_'
Bill

5
@GeorgeKatsanos 'lodash/has'bukan paket terpisah. Ada file yang dipanggil has.jsdi root dari 'lodash'paket reguler , dan import has from 'lodash/has'(atau const has = require ('lodash/has) akan memuat file itu. Ada yang paket metode terpisah pada NPM, tetapi mereka menggunakan "dot sintaks": 'lodash.has'. Ini juga akan menjadi cara yang valid untuk menyelesaikannya jika Anda tidak keberatan menginstal paket terpisah untuk setiap metode yang Anda gunakan (dan berpotensi membuat Anda package.jsonmasif sebagai hasilnya).
daemonexmachina

80
Saya harus menambahkan di sini bahwa, jika Anda menggunakan webpack 2 atau rollup (bundler yang mendukung pengocokan pohon), maka import { has } from 'lodash'akan bekerja dengan cara yang sama, karena sisanya akan dihapus
Alex JM

1
@PDN webpack 2 pohon goyang harus melakukannya untuk Anda secara otomatis
Bill

23
tidak seperti yang lain, gemetar pohon saya tidak akan bekerja dengan sintaksis yang lebih jelas, hanya setelah saya beralih ke lodash-es dan menggunakan import has from 'lodash-es/has'sintaksis saya mendapatkan gemetar pohon penuh. beralih dari 526KB ke 184KB, lihat stackoverflow.com/questions/41991178/…
Brandon Søren Culley

86

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 .


Saya mengonversikan semua impor lodash saya ke import { ... } from 'lodash-es'; bundel Saya masih termasuk seluruh perpustakaan.
Isaac Pak

@IsaacPak Pastikan Anda tidak mentransmisikan modul ES ke CommonJS. Jika Anda menggunakan TypeScript, Anda harus mengatur --moduleopsi kompiler sebagai es6, es2015atau esnext.
kimamula

Saya tidak menggunakan TypeScript dan preset .babelrc saya diatur ke modules: falsesehingga mereka tidak dialihkan ke CommonJS. Saya menggunakan solusi Bruce sekarang yang sepertinya berhasil. Terima kasih atas kontribusi Anda, saya yakin itu berhasil tetapi saya tidak memiliki pengaturan untuk itu.
Isaac Pak

sayangnya, tidak dapat menggunakan lodash-es dengan bercanda pada saat ini: github.com/facebook/jest/issues/4842#issuecomment-491434065
apollo

1
import has from 'lodash-es/has'dan import {has} from 'lodash-es'kedua varian melakukan treeshaking saat menggunakanwebpack-4
Legends

9

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

Terima kasih atas jawaban yang bermanfaat. Namun, saya suka _.map()sintaks yang jelas bahwa perpustakaan eksternal sedang digunakan. Apakah import _ from 'lodash'sama efisiennya dengan saran Anda atau adakah cara lain untuk dapat menggunakan sintaks ini?
Toivo Säwén

1
@ ToivoSäwén Saya sepenuhnya setuju dan lebih suka _.map()sintaks eksplisit juga. Apakah Anda dapat menemukan cara untuk mempertahankannya sambil melakukan impor es dan pengocokan pohon?
Raj

4

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

4

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),

1

Impor Lodash dalam versi 4.17.15

import * as _ from 'lodash';
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.