Reactでビルドしたファイルのサイズが大き過ぎるのを少しでも小さくしたい的なお話

wordpressのサイトをあえてのReact + WP Rest APIで書いているんだけど、
React + Webpackでビルドした際に、ファイルサイズがすごく大きくなってしまうことがある。
いくつか原因があるので、今日はそれらを解決して少しでもファイルサイズを小さくするには的なお話をば。

ちなみに自分の環境は以下のような感じ。

package.json

{
  "name": "hoge",
  "version": "1.0.0",
  "description": "hogehoge",
  "scripts": {
    "dev": "webpack --config webpack.dev.config.js --progress --watch",
    "build": "NODE_ENV=production webpack --config webpack.prod.config.js --progress -p"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-plugin-module-alias": "^1.6.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "cookie-parser": "^1.4.3",
    "css-loader": "^0.28.4",
    "cssnano": "^3.10.0",
    "envify": "^4.1.0",
    "es6-promise": "^4.1.1",
    "extract-text-webpack-plugin": "^3.0.0",
    "immutable": "^3.8.1",
    "isomorphic-fetch": "^2.2.1",
    "json-loader": "^0.5.4",
    "less": "^2.7.2",
    "less-loader": "^4.0.5",
    "postcss": "^6.0.8",
    "precss": "^2.0.0",
    "prop-types": "^15.5.10",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-helmet": "^5.1.3",
    "react-redux": "^5.0.5",
    "react-router": "^3.0.0",
    "react-router-redux": "^4.0.8",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0",
    "serialize-javascript": "^1.4.0",
    "style-loader": "^0.18.2",
    "uglify-js": "^3.0.25",
    "uglifyjs-webpack-plugin": "^0.4.6",
    "webpack": "^3.3.0"
  }
}

以下の点を確認。
・本番ビルドする際にwepack -pとやっているか？
・webpack プラグインで圧縮とか云々とかしているか？
・immutable.jsを使っているか？

■webpack -p

これは割と重要というか必須で、minimizeしてくれたりとか色々と本番用のために諸々やってくれる。

■webpack プラグインで圧縮とか云々

なんか色々と見ていると下記の4つをみんな使っていたりする。
・DedupePlugin()
・UglifyJsPlugin()
・OccurrenceOrderPlugin()
・AggressiveMergingPlugin()

これをwebpackのプラグインに設定してみたんだけど、
-pオプションを使っているからかほとんどというか効果はなかった。
もしくはwebpack3だからなのかどうなのかはよくわからないけど、まぁ別にっていう感じ。

ちなみにUglifyJsPlugin()はnpm install --save-dev uglifyjs-webpack-pluginとしてnpmパッケージを入れないと使えなかった。

■immutable.jsを使っているか？

immutable.jsはめっちゃ便利。
stateの更新とかパパッとひとまとめで書けるし、書けるとなんか気持ちいいし。
ただ問題点として、immutable.jsを使うとファイルサイズが100KB近く増してしまう。
100KBといえばjQueryと同じくらいのサイズ。
jQueryが重い重い言われている時代なのにそれと同じくらい増してしまったら意味がないよね的な。
個人的には使うべきだと思っているんだけど、ちょこっとしたMapの更新とかListの更新とか、 何箇所かしか使わないならばやめておいた方がユーザにとって親切なんじゃないかと思うみたいな。

■余談：Server Side Renderingについて

immutable使うとか、Material UI使うとかいっぱいやってしまうと本番ビルドでも半端ないファイルサイズになってしまう。
そうするとユーザにとってページを最初に開き終わるまで長すぎてしまうという問題がある。
けどまぁSSRすることによって最初にレンダリングしたものを表示することができるので、重いjs読み込んでも問題ないよね的な。
ってな感じで実はSSRにはそういう役割もあったりする的な。

ちなみにwordpressのテンプレートをReactとか使ってSPAで作ると実は楽だったりすると今回思った。
category.phpとかsingle.php、page.phpとか自動的にルーティングしてくれるから、
それらのファイルを作って必要なmetaタグを入れておくこともできるわけだし、
ユーザ同士のリレーションとかショッピングカートがあるとかじゃないブログがメインだから余計なことを考えなくていいし。
だからこそ余計にファイルサイズを削ぎ落とさないといけないので、immutableは使うのを控えるのもいいんじゃないか的な。

ってなわけで個人的にはwordpressサイトを組むならばReactの方が簡単だし、いいんじゃないかと思っている的なみたいな。