lodashをインポートする正しい方法

以下にプルリクエストのフィードバックがありましたが、lodashをインポートする正しい方法はどちらかと思いますか？

インポートは 'lodash / has'から行うほうがよいでしょう。それ自体がかなり重いlodash（v3）の以前のバージョンでは、lodashライブラリ全体をインポートするのではなく、特定のモジュール/関数のみをインポートする必要があります。新しいバージョン（v4）については不明です。

import has from 'lodash/has';

対

import { has } from 'lodash';

ありがとう

import has from 'lodash/has';lodashはすべての関数を単一のファイルに保持しているため、より優れています。したがって、「lodash」ライブラリ全体を100kでインポートhasするのではなく、おそらく2kであるlodashの関数をインポートする方が適切です。

を使用しているwebpack 4場合、次のコードはツリーを揺らすことができます。

import { has } from 'lodash-es';

注意すべき点;

1. CommonJSモジュールはツリーを揺らすことができないためlodash-es、lodash（CommonJS）ではなく、ESモジュールとしてエクスポートされたLodashライブラリであるを必ず使用する必要があります。

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はもサポートしているため、Parcelでimport { has } from 'lodash-es';ツリーを揺さぶることもできます。私の実験によると、 ESモジュールのツリーシェイクはCommonJSよりも効率的である可能性が高いですが、CommonJSモジュールのツリーシェイキングもサポートしています。

中括弧内に特定のメソッドをインポートする

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

長所：

• 1つのインポート行のみ（適切な量の関数の場合）
• より読みやすい使用法：後でJavaScriptコードの_.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';

2つ目は必要なモジュールのみをロードするため、1つ目よりもはるかに最適化されています

次に、このように使用します

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

Lodashをバージョンにインポート 4.17.15

import * as _ from 'lodash';