[webpack] バンドルされるLodashのサイズを減らす方法

概要

Lodash の一部のモジュールを使用した場合でも全てのモジュールをバンドルしてしまいファイルサイズが肥大化してしまう。

私の環境下ではcloneDeepのみを使用していたので、それだけバンドルされるようにする。

設定方法

import { cloneDeep } from 'lodash';と記述しても上手く Tree Shaking されないため、lodash-webpack-pluginを利用する。

設定は下記にような形で行う。

webpack.config.js

const LodashModuleReplacementPlugin = require("lodash-webpack-plugin");

module.exports = {
  plugins: [new LodashModuleReplacementPlugin()],
};

.babelrc

{
  "plugins": [["lodash"]]
}

あとはこれまで通り、下記のように特定のモジュールを読み込むだけで OK

import { cloneDeep } from "lodash";