วิธีที่ถูกต้องในการนำเข้า lodash

185

ฉันมีคำติชมคำขอดึงด้านล่างเพียงแค่สงสัยว่าวิธีใดที่จะนำเข้า lodash ในแบบที่ถูกต้อง

คุณควรที่จะนำเข้ามาจาก 'lodash / has' .. สำหรับเวอร์ชั่นก่อนหน้าของ lodash (v3) ซึ่งโดยตัวของมันเองค่อนข้างหนักเราควรนำเข้าโมดูล / ฟังก์ชั่น specidic เท่านั้นแทนที่จะนำเข้าทั้งห้องสมุด lodash ไม่แน่ใจเกี่ยวกับเวอร์ชั่นใหม่กว่า (v4)

import has from 'lodash/has';

VS

import { has } from 'lodash';

ขอบคุณ

javascript lodash babeljs

— บิล
แหล่งที่มา

4

ดูคำตอบนี้เพื่อรับการสนทนาเชิงลึกเพิ่มเติมว่าเหตุใดจึงยังสามารถเพิ่มประสิทธิภาพในบางสภาพแวดล้อมเช่น Webpack มันเกิดจากการใช้การวิเคราะห์แบบคงที่และการเขย่าต้นไม้

— Patrick Roberts

244

import has from 'lodash/has';ดีกว่าเพราะ lodash มีฟังก์ชั่นทั้งหมดในไฟล์เดียวดังนั้นแทนที่จะนำเข้าไลบรารี 'lodash' ทั้งหมดที่ 100k จะเป็นการดีกว่าที่จะนำเข้าhasฟังก์ชั่นของ lodash ซึ่งอาจจะเป็น 2k

— บิล
แหล่งที่มา

1

@GeorgeKatsanos คุณเพียงแค่นำเข้าฟังก์ชั่นที่คุณต้องการใช้คุณไม่จำเป็นต้องใช้ '_'

— Bill

5

@GeorgeKatsanos 'lodash/has'ไม่ใช่แพ็คเกจแยกต่างหาก มีไฟล์ชื่อhas.jsในรูทของ'lodash'แพ็คเกจปกติและimport has from 'lodash/has'(หรือconst has = require ('lodash/has) จะโหลดไฟล์นั้น มีเป็นแพคเกจวิธีการแยก NPM แต่พวกเขาใช้ 'lodash.has'"จุดไวยากรณ์": นี่จะเป็นวิธีที่ถูกต้องในการดำเนินการหากคุณไม่คิดที่จะติดตั้งแพ็คเกจแยกต่างหากสำหรับทุกวิธีที่คุณใช้ (และอาจทำให้คุณpackage.jsonมีผลเสียมหาศาล)

— daemonexmachina

80

ฉันต้องเพิ่มที่นี่ว่าถ้าคุณใช้ webpack 2 หรือ rollup (ชุดรวมที่รองรับการเขย่าต้นไม้) จากนั้นimport { has } from 'lodash'จะทำงานในลักษณะเดียวกันเนื่องจากส่วนที่เหลือจะถูกตัดออก

— Alex JM

1

@PDN webpack 2 tree shaking ควรทำเพื่อคุณโดยอัตโนมัติ

— Bill

23

ไม่เหมือนต้นไม้อื่น ๆ ที่เขย่าต้นไม้ของฉันจะไม่ทำงานกับไวยากรณ์ที่ชัดเจนยิ่งขึ้น แต่หลังจากฉันเปลี่ยนเป็น Lodash-es และใช้import has from 'lodash-es/has'ไวยากรณ์ที่ฉันได้รับจากการเขย่าต้นไม้เต็มรูปแบบ ไปจาก 526KB ถึง 184KB ดูstackoverflow.com/questions/41991178/…

— Brandon Søren Culley

86

หากคุณกำลังใช้webpack 4รหัสต่อไปนี้เป็นต้นไม้ที่สั่นไหวได้

import { has } from 'lodash-es';

จุดที่ควรทราบ;

โมดูล CommonJS นั้นไม่สามารถใช้กับแผนผังได้ดังนั้นคุณควรใช้อย่างแน่นอนlodash-es, ซึ่งเป็นไลบรารี Lodash ที่เอ็กซ์พอร์ตเป็น ES Modules, lodash(CommonJS).
lodash-es's package.json มี"sideEffects": falseซึ่งแจ้งให้ webpack 4 ทราบว่าไฟล์ทั้งหมดในแพ็คเกจไม่มีผลข้างเคียง (ดูhttps://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side - ผลกระทบฟรี )
ข้อมูลนี้มีความสำคัญอย่างยิ่งต่อการเขย่าต้นไม้เนื่องจากตัวรวมโมดูลไม่มีไฟล์เขย่าต้นไม้ซึ่งอาจมีผลข้างเคียงแม้ว่าสมาชิกที่ถูกเอ็กซ์พอร์ตจะไม่ได้ใช้ในทุกที่

แก้ไข

ในเวอร์ชัน 1.9.0 พัสดุสนับสนุน"sideEffects": falseเช่นกัน threrefore import { has } from 'lodash-es';เป็นต้นไม้ที่สามารถใช้ร่วมกับพัสดุได้ นอกจากนี้ยังสนับสนุนการเขย่าต้นไม้โมดูล CommonJS แม้ว่ามันจะเป็นแนวโน้มที่ต้นไม้สั่นของ ES โมดูลจะมีประสิทธิภาพมากกว่า CommonJS ตามการทดสอบของฉัน

— kimamula
แหล่งที่มา

ฉันแปลงการนำเข้า lodash ทั้งหมดของฉันเป็นimport { ... } from 'lodash-es'; ชุดรวมของฉันยังรวมถึงห้องสมุดทั้งหมด

— Isaac Pak

@IsaacPak ตรวจสอบให้แน่ใจว่าคุณไม่ได้แปลงโมดูล ES เป็น CommonJS หากคุณกำลังใช้ typescript คุณต้องตั้งค่า--moduleตัวเลือกคอมไพเลอร์เป็นes6, หรือes2015 esnext

— kimamula

ฉันไม่ได้ใช้ TypeScript และ preset .babelrc env ของฉันถูกตั้งค่าไว้modules: falseเพื่อไม่ให้ transpiled เป็น CommonJS ฉันกำลังใช้วิธีแก้ปัญหาของ Bruce ตอนนี้ซึ่งดูเหมือนจะใช้ได้ ขอบคุณสำหรับการสนับสนุนของคุณฉันแน่ใจว่าใช้งานได้ แต่ฉันไม่มีการตั้งค่า

— Isaac Pak

น่าเสียดายที่ไม่สามารถใช้ lodash-es ด้วยความตลกขบขันได้ในตอนนี้: github.com/facebook/jest/issues/4842#issuecomment-491434065

— apollo

1

import has from 'lodash-es/has'และimport {has} from 'lodash-es'ทั้งสองสายพันธุ์ต่างทำ treeshaking เมื่อใช้webpack-4

— ตำนาน

9

นำเข้าวิธีการเฉพาะภายในวงเล็บปีกกา

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

ข้อดี:

หนึ่งบรรทัดการนำเข้าเท่านั้น (สำหรับฟังก์ชันที่มีจำนวนพอสมควร)
อ่านเพิ่มเติมการใช้งาน: แผนที่ () แทน _.map () ในภายหลังในรหัสจาวาสคริปต์

จุดด้อย:

ทุกครั้งที่เราต้องการใช้ฟังก์ชั่นใหม่หรือหยุดใช้ฟังก์ชั่นอื่น - มันจะต้องได้รับการบำรุงรักษาและจัดการ

— Nikhil
แหล่งที่มา

ขอบคุณสำหรับคำตอบที่มีประโยชน์ อย่างไรก็ตามฉันชอบ_.map()ไวยากรณ์ที่ชัดเจนว่ามีการใช้ไลบรารีภายนอก คือimport _ from 'lodash'มีประสิทธิภาพเท่าเทียมกันเป็นคำแนะนำของคุณหรือมีวิธีของความสามารถในการใช้รูปแบบนี้อีก?

— Toivo Säwén

1

@ ToivoSäwénฉันเห็นด้วยอย่างยิ่งและต้องการ_.map()ไวยากรณ์ที่ชัดเจนเช่นกัน คุณสามารถคิดหาวิธีที่จะรักษามันในขณะที่ทำการนำเข้า es6 และเขย่าต้นไม้

— ราชา

4

หากคุณกำลังใช้บาเบลคุณควรตรวจสอบbabel-plugin-lodashมันจะเลือกส่วนของ lodash ที่คุณใช้งานให้คุณไม่ยุ่งยากและมัดเล็กลง

มีข้อ จำกัดเล็กน้อย:

คุณต้องใช้การนำเข้า ES2015 เพื่อโหลด Lodash
Babel <6 & Node.js <4 ไม่ได้รับการสนับสนุน
ไม่รองรับลำดับห่วงโซ่ ดูโพสต์บล็อกนี้สำหรับทางเลือก
แพคเกจวิธีการแบบโมดูลาร์ไม่ได้รับการสนับสนุน

— ออร์แลนโด
แหล่งที่มา

4

คุณสามารถนำเข้าพวกเขาเป็น

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

หรือเป็น

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

อันที่สองนั้นได้รับการปรับปรุงให้ดีกว่าครั้งแรกมากเพราะมันโหลดเฉพาะโมดูลที่จำเป็น

จากนั้นใช้เช่นนี้

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

— Charith Jayasanka
แหล่งที่มา

1

นำเข้า Lodash ในเวอร์ชัน 4.17.15

import * as _ from 'lodash';

— Vinay
แหล่งที่มา