Правильний спосіб імпорту лодашу

Нижче у мене був зворотній зв'язок із запитом на запит, просто цікаво, який спосіб - імпортувати квартир?

Вам краще зробити імпорт з "lodash / has". Для попередньої версії lodash (v3), яка сама по собі є досить важкою, ми повинні імпортувати лише специфічний модуль / функцію, а не імпорт всієї бібліотеки lodash. Не впевнений у новій версії (v4).

import has from 'lodash/has';

проти

import { has } from 'lodash';

Дякую

import has from 'lodash/has';краще, тому що lodash зберігає всі свої функції в одному файлі, тому замість того, щоб імпортувати всю бібліотеку 'lodash' на 100k, краще просто імпортувати функцію lodash, hasяка може бути 2k.

Якщо ви користуєтесь webpack 4, наступний код є хитким для дерева.

import { has } from 'lodash-es';

Бали, які слід зазначити;

1. Модулі CommonJS не зруйнуються з дерева, тому ви обов'язково повинні використовувати lodash-es, що є бібліотекою Lodash, експортованою як ES-модулі, а не lodash(CommonJS).

2. lodash-es's package.json містить "sideEffects": false, який повідомляє webpack 4 про те, що всі файли в пакеті не мають побічних ефектів (див. https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side -без ефектів ).

3. Ця інформація має вирішальне значення для струшування дерев, оскільки постачальники модулів не трясуть файли дерев, які, можливо, містять побічні ефекти, навіть якщо їх експортовані члени ніде не використовуються.

Редагувати

Починаючи з версії 1.9.0, Parcel також підтримує"sideEffects": false , import { has } from 'lodash-es';тому що також є тремтінням дерева з Parcel. Він також підтримує струшування дерев модулів CommonJS, хоча, швидше за все, тремтіння дерев модулів ES є більш ефективним, ніж CommonJS, згідно з моїм експериментом .

Імпортуйте конкретні методи всередину фігурних дужок

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

Плюси:

• Лише одна імпортна лінія (для пристойної кількості функцій)
• Більш зрозуміле використання: map () замість _.map () пізніше в коді javascript.

Мінуси:

• Кожен раз, коли ми хочемо використовувати нову функцію або припиняти використання іншої - її потрібно підтримувати та керувати

Якщо ви використовуєте babel, вам слід перевірити babel-plugin-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';