Cách chính xác để nhập lodash

Tôi đã có một phản hồi yêu cầu kéo bên dưới, chỉ tự hỏi cách nào là cách chính xác để nhập lodash?

Tốt hơn hết là bạn nên nhập từ 'lodash / has' .. Đối với phiên bản trước đó của lodash (v3), bản thân nó khá nặng, chúng ta chỉ nên nhập một mô-đun / chức năng cụ thể thay vì nhập toàn bộ thư viện lodash. Không chắc chắn về phiên bản mới hơn (v4).

import has from 'lodash/has';

đấu với

import { has } from 'lodash';

Cảm ơn

import has from 'lodash/has';sẽ tốt hơn vì lodash giữ tất cả các chức năng của nó trong một tệp, vì vậy thay vì nhập toàn bộ thư viện 'lodash' với giá 100k, tốt hơn là chỉ nhập hàm của lodash hascó thể là 2k.

Nếu bạn đang sử dụng webpack 4, mã sau đây là cây có thể lắc.

import { has } from 'lodash-es';

Những điểm cần lưu ý;

1. Các mô-đun CommonJS không thể lay chuyển được cây, vì vậy bạn chắc chắn nên sử dụng lodash-es, đó là thư viện Lodash được xuất dưới dạng Mô-đun ES, thay vì lodash(CommonJS).

2. lodash-esGói.json chứa "sideEffects": false, thông báo cho webpack 4 rằng tất cả các tệp bên trong gói đều không có tác dụng phụ (xem https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side -Không hiệu quả ).

3. Thông tin này rất quan trọng đối với rung cây vì các bộ đóng gói mô-đun không tạo các tệp lắc cây có thể chứa các tác dụng phụ ngay cả khi các thành viên xuất khẩu của chúng không được sử dụng ở bất cứ đâu.

Biên tập

Kể từ phiên bản 1.9.0, Parcel cũng hỗ trợ"sideEffects": false , threrefor import { has } from 'lodash-es';cũng có thể chuyển đổi được với Parcel. Nó cũng hỗ trợ rung cây mô-đun CommonJS, mặc dù có khả năng rung cây của Mô-đun ES hiệu quả hơn so với CommonJS theo thí nghiệm của tôi .

Nhập các phương thức cụ thể bên trong dấu ngoặc nhọn

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

Ưu điểm:

• Chỉ có một dòng nhập khẩu (cho một số lượng lớn các chức năng)
• Cách sử dụng dễ đọc hơn: map () thay vì _.map () sau trong mã javascript.

Nhược điểm:

• Mỗi khi chúng tôi muốn sử dụng một chức năng mới hoặc ngừng sử dụng một chức năng khác - nó cần được duy trì và quản lý

Nếu bạn đang sử dụng babel, bạn nên kiểm tra babel-plugin-lodash , nó sẽ chọn các phần của lodash bạn đang sử dụng cho bạn, ít rắc rối hơn và một gói nhỏ hơn.

Nó có một vài hạn chế :

• Bạn phải sử dụng nhập khẩu ES2015 để tải Lodash
• Babel <6 & Node.js <4 không được hỗ trợ
• Chuỗi chuỗi không được hỗ trợ. Xem bài đăng blog này để thay thế.
• Gói phương thức mô đun hóa không được hỗ trợ

Bạn có thể nhập chúng dưới dạng

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

hoặc như

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

cái thứ hai được tối ưu hóa hơn cái thứ nhất vì nó chỉ tải các mô-đun cần thiết

sau đó sử dụng như thế này

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

Nhập khẩu Lodash trong phiên bản 4.17.15

import * as _ from 'lodash';