lodashをimport時のwebpack容量を抑えたい...

lodashをimport時の容量節約

Webpackのバンドル時にlodashが全部含まれしまい容量が肥大化する。

importの仕方を変える

import { isEmpty } from 'lodash';

...
const obj = hoge.fuga;
if (isEmpty(obj)) {
  // 処理
} else {
  // 処理
}

まずは安直に上記のようなコードを書いたが、実はlodashの中身がすべてインポートされている。

// ビルド後
var lodash = require('lodash');
var isEmpty = lodash.isEmpty;
...

VSCodeのプラグインであるimport Costを使っても変わらないことがわかる。

一旦落ち着いた方法

一つずつ呼ぶ

import get from "lodash/get";
import set from "lodash/set";
import isEmpty from "lodash/isEmpty";
import map from "lodash/map";
.
.
.
.

これまた安直だが、一旦はこれに落ち着いた。
容量も減っていることが確認できる

最後に

他に賢いやり方知ってる方いたら教えてくださいまし。。。