lodash のファイルサイズを lodash-webpack-plugin と babel-plugin-lodash を使って削減する

概要

react で SPA を作成していたのですが、webpack-bundle-analyzer をみると、lodash の占める割合が大きかったので、少しでも減らせるような試みとして、
lodash-webpack-pluginと babel-plugin-lodashを使って、 ファイルサイズを削減しました。

利用した主なパッケージのバージョン

"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-lodash": "^3.3.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"lodash-webpack-plugin": "^0.11.5",
"webpack": "^4.20.2",
"webpack-bundle-analyzer": "^3.0.2",
"webpack-cli": "^3.1.2",

使用方法

まずはパッケージを追加

yarn add --dev lodash-webpack-plugin babel-plugin-lodash

.babelrcにbabel-plugin-lodashを追加

"plugins": ["lodash"]

webpack.config.jsにlodash-webpack-pluginの設定を追加

const webpack = require('webpack');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
  .BundleAnalyzerPlugin;
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin'); //追加

module.exports = {
  //省略
plugins: [
    new BundleAnalyzerPlugin(),
    new LodashModuleReplacementPlugin({
      collections: true,
      chaining: true
    }) //追加
  ]

lodash-webpack-pluginをデフォルト設定で使うと使えない機能がでてくるので、

ここではcollections:Collection method(orderByとか使ってたので)
chainig:メソッドチェーンを使っていたので

その他の設定に関しては、ここを参照

後は、webpack -pなどして動作確認を行ってください。

まとめ

対応を行ったことでファイルサイズは削減できたのですが、細かい値は記録してませんでした。(計測を忘れて作業するのは残念すぎました。)

lodash-webpack-pluginとbabel-plugin-lodashを使えば、簡単にlodashのファイルサイズが削減できるので便利

参考リンク

babel-plugin-lodashで依存パッケージから未使用のコードを削除する

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