web-dev-qa-db-ja.com

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

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

それ自体はかなり重いlodash（v3）の以前のバージョンでは、lodashライブラリ全体をインポートするのではなく、特定のモジュール/関数のみをインポートするようにしてください。新しいバージョン（v4）についてはよくわかりません。

import has from 'lodash/has';

vs

import { has } from 'lodash';

ありがとう

javascriptlodashbabeljs
137
Bruce

lodashはすべての関数を単一のファイルに保持しているのでimport has from 'lodash/has';の方が優れています。したがって、100kで 'lodash'ライブラリ全体をインポートするのではなく、lodashのhas関数をインポートするほうがいいでしょう。

180
Bruce

Webpack 4を使用している場合、以下のコードはツリーシェイク可能です。

import { has } from 'lodash-es';

注意すべき点

  1. CommonJSモジュールはツリーシェイク可能ではないので、 lodash （CommonJSではなく）ESモジュールとしてエクスポートされたLodashライブラリである lodash-es を必ず使用してください。 ）.

  2. lodash-esのpackage.jsonには"sideEffects": falseが含まれています。これはパッケージ内のすべてのファイルに副作用がないことをwebpack 4に通知します（ https://webpack.js.org/guides/tree-shaking/#mark-the副作用のないファイル（ ）。

  3. エクスポートされたメンバがどこにも使用されていなくても、モジュールのバンドル担当者が副作用を含む可能性のあるファイルをツリーシェイクしないため、この情報はツリーシェイクに不可欠です。

編集

バージョン1.9.0以降、Parcelは"sideEffects": false もサポートします。rereforeimport { has } from 'lodash-es';もParcelとツリーシェイク可能です。これはCommonJSモジュールのツリーシェイクもサポートしていますが、 私の実験 によるとESモジュールのツリーシェイクはCommonJSよりも効率的です。

44
kimamula

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

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

長所：

  • 1行のみ（適切な量の関数用）
  • より読みやすい使い方：javascriptコードの後半の_.map（）の代わりにmap（）。

短所：

  • 新しい機能を使用したり、他の機能を使用したりしたくないときはいつでも - それは維持され管理される必要があります
1
Nikhil

もしあなたがbabelを使っているのなら、 babel-plugin-lodash をチェックしてください。手間と小さなバンドル。

それはいくつかの 制限があります ：

  • Lodashを読み込むにはES2015のインポートを使用する必要があります
  • Babel <6＆Node.js <4はサポートされていません
  • 連鎖シーケンスはサポートされていません。代替案についてはこちら のブログ記事 をご覧ください。
  • モジュール化 メソッドパッケージ はサポートされていません
1
Orlando