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';
주목할 점;
-
CommonJS 모듈은 나무를 흔드는 것이 아니므로 반드시 (CommonJS)가
lodash-es
아닌 ES 모듈로 내 보낸 Lodash 라이브러리 인을 사용해야합니다lodash
. -
lodash-es
의 package.json contains"sideEffects": false
는 패키지 내의 모든 파일에 부작용이 없음을 webpack 4에 알립니다 ( https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side 참조). 효과가 없습니다 ). -
이 정보는 모듈 번 들러가 내 보낸 멤버를 어디에서나 사용하지 않더라도 부작용이있을 수있는 파일을 트리 쉐이크하지 않기 때문에 트리 쉐이킹에 중요합니다.
편집하다
버전 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 부분, 번거 로움이 적고 번들이 적습니다.
몇 가지 제한 사항이 있습니다 .
답변
당신은 그들을 가져올 수 있습니다
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';