概要

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';