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


185

У меня была обратная связь по запросу, просто интересно, как правильно импортировать lodash?

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

import has from 'lodash/has';

против

import { has } from 'lodash';

Спасибо


4
Посмотрите этот ответ для более глубокого обсуждения того, почему последний все еще может подвергаться оптимизации производительности в некоторых средах, таких как Webpack. Это связано с использованием статического анализа и тряски деревьев.
Патрик Робертс

Ответы:


244

import has from 'lodash/has';Это лучше, потому что lodash хранит все свои функции в одном файле, поэтому вместо того, чтобы импортировать всю библиотеку 'lodash' на 100 Кб, лучше просто импортировать hasфункцию Лодаша, которая может быть 2 Кб.


1
@ GeorgeKatsanos вы просто импортируете функцию, которую хотите использовать, вам не нужно '_'
Bill

5
@ GeorgeKatsanos 'lodash/has'- это не отдельный пакет. В has.jsкорневом каталоге обычного 'lodash'пакета есть файл, и import has from 'lodash/has'(или const has = require ('lodash/has) он будет загружен. Там являются отдельными пакеты метода на НОМ, но они используют «точечный синтаксис»: 'lodash.has'. Это также будет правильным способом сделать это, если вы не возражаете против установки отдельного пакета для каждого метода, который вы используете (и, package.jsonкак следствие, в результате этого можете сделать свой массовый процесс).
daemonexmachina

80
Я должен добавить здесь, что, если вы используете webpack 2 или накопительный пакет (пакет, который поддерживает встряхивание дерева), то import { has } from 'lodash'будет работать так же, так как остальные будут удалены
Alex JM

1
@PDN Webpack 2 встряхивания дерева должен сделать это для вас автоматически
Билл

23
в отличие от некоторых других, мое дрожание дерева не будет работать с более очевидным синтаксисом, только после того, как я переключился на lodash-es и использовал import has from 'lodash-es/has'синтаксис, я получил полное дрожание дерева. перешел с 526 КБ на 184 КБ, см. stackoverflow.com/questions/41991178/…
Брэндон Сёрен Калли

86

Если вы используете webpack 4, следующий код является древовидным.

import { has } from 'lodash-es';

Точки для заметки;

  1. Модули CommonJS не могут быть перемещаемыми по дереву, поэтому вы обязательно должны их использовать lodash-es, то есть библиотеку Lodash, экспортируемую как модули ES, а не lodash(CommonJS).

  2. lodash-esСодержит 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, согласно моему эксперименту .


Я конвертировал весь свой импорт lodash в import { ... } from 'lodash-es'; Мой пакет, который по-прежнему включает всю библиотеку.
Исаак Пак

@IsaacPak Убедитесь, что вы не переносите модули ES в CommonJS. Если вы используете TypeScript, вы должны установить --moduleопцию компилятора как es6, es2015или esnext.
Кимамула

Я не использую TypeScript, и моя предустановка .babelrc env установлена modules: falseтак, чтобы они не передавались в CommonJS. Сейчас я использую решение Брюса, которое, кажется, работает. Спасибо за ваш вклад, я уверен, что это работает, но у меня просто нет настройки для этого.
Исаак Пак

к сожалению, на данный момент нельзя использовать lodash-es с шуткой: github.com/facebook/jest/issues/4842#issuecomment-491434065
apollo

1
import has from 'lodash-es/has'и import {has} from 'lodash-es'оба варианта делают treehaking при использованииwebpack-4
Legends

9

Импорт определенных методов внутри фигурных скобок

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

Плюсы:

  • Только одна строка импорта (для приличного количества функций)
  • Более читаемое использование: map () вместо _.map () позже в коде javascript.

Минусы:

  • Каждый раз, когда мы хотим использовать новую функцию или перестать использовать другую - ее необходимо поддерживать и управлять

Спасибо за полезный ответ. Однако мне нравится _.map()синтаксис, чтобы было понятно, что используется внешняя библиотека. Является ли import _ from 'lodash'столь же эффективным , как ваше предложение или есть другой способ быть в состоянии использовать этот синтаксис?
Тойво Савен

1
@ ToivoSäwén Я полностью согласен и предпочитаю также явный _.map()синтаксис. Удалось ли вам найти способ сохранить это, выполняя импорт es6 и тряску деревьев?
Радж

4

Если вы используете babel, вы должны проверить 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),

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.