lodash를 가져 오는 올바른 방법

lodash를 가져 오는 올바른 방법이 무엇인지 궁금한데 아래에서 요청에 대한 피드백을 받았습니다.

가져 오기를 'lodash / has'에서 수행하는 것이 좋습니다 .. 이전 버전의 lodash (v3) 자체만으로는 무겁기 때문에 전체 lodash 라이브러리를 가져 오는 대신 특정 모듈 / 함수 만 가져와야합니다. 최신 버전 (v4)에 대해 확실하지 않습니다.

import has from 'lodash/has';

vs

import { has } from 'lodash';

감사

import has from 'lodash/has';lodash는 모든 기능을 단일 파일로 보유하기 때문에 더 좋습니다. 따라서 전체 'lodash'라이브러리를 100k로 가져 오는 것이 아니라 lodash의 has함수 인 2k를 가져 오는 것이 좋습니다 .

를 사용하는 경우 webpack 4다음 코드는 나무를 흔 듭니다.

import { has } from 'lodash-es';

주목할 점;

1. CommonJS 모듈은 나무를 흔드는 것이 아니므로 반드시 (CommonJS)가 lodash-es아닌 ES 모듈로 내 보낸 Lodash 라이브러리 인을 사용해야합니다 lodash.

2. lodash-es의 package.json contains "sideEffects": false는 패키지 내의 모든 파일에 부작용이 없음을 webpack 4에 알립니다 ( https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side 참조). 효과가 없습니다 ).

3. 이 정보는 모듈 번 들러가 내 보낸 멤버를 어디에서나 사용하지 않더라도 부작용이있을 수있는 파일을 트리 쉐이크하지 않기 때문에 트리 쉐이킹에 중요합니다.

편집하다

버전 1.9.0부터 Parcel은"sideEffects": false 또한를 지원하므로 Parcel로import { has } from 'lodash-es'; 트리를 흔드는 것도 가능합니다 . 이 ES 모듈의 흔들림 가능성이 나무가에 따라 CommonJS보다 더 효율적입니다하지만 그것은 또한, 나무 흔들어 CommonJS 모듈을 지원 내 실험 .

중괄호 안에 특정 메소드 가져 오기

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

장점 :

• 하나의 가져 오기 라인 만 (정확한 기능을 위해)
• 더 읽기 쉬운 사용법 : 나중에 자바 스크립트 코드에서 _.map () 대신 map ().

단점 :

• 새로운 기능을 사용하거나 다른 기능을 사용하지 않으려 고 할 때마다 유지 관리해야합니다.

babel을 사용하는 경우 babel-plugin-lodash를 확인해야합니다. 대신 사용하는 lodash 부분, 번거 로움이 적고 번들이 적습니다.

몇 가지 제한 사항이 있습니다 .

• Lodash를로드하려면 ES2015 가져 오기를 사용해야합니다
• Babel <6 & Node.js <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),

버전에서 Lodash 가져 오기 4.17.15

import * as _ from 'lodash';