create-react-appで作成したwebアプリのファイルサイズを削る

create-react-appで作成したアプリをクラウドにリリースしようとしたが、ファイルサイズが少々気になったため、これを削ってみることにした。

npx create-react-app

コマンドで作成したreactアプリを

npm run build

コマンドでビルドする。

このビルドしたファイルをサーバにリリースすることになるが、大したアプリでもないのにファイルサイズが案外大きい。

AWSやGCPなどのクラウドサービス上にリリースするには、多少なりとも料金が気になる。

そのためファイルサイズを削ることを試みる。
そもそもcloudflareなどのCDNを経由してwebアプリを提供すれば直接アクセスは減少するので気にならないかも知れないが・・・なんとなく試してみた。

さてまずは、ビルドしたファイルを以下のコマンドで分析してみる。

npx source-map-explorer 'build/static/js/*.js'

結果をみてみると、リリースファイルに同梱されているreact,react-domのサイズが大きいことが分かる。

そこで、react,react-domをリリースファイルに同梱せずに外部CDNから取得する方式に変えることで、容量の削減を試みる

手順はさほど多くはない。まずは以下のコマンドを実行し、webpackの設定ファイルを始めとする構成ファイル群を取り出す。

※このイジェクト操作は一方向であり、これまでは裏でよしなに行われていた構成管理を以降は自身で行うことになる。

npm run eject

次に出力されたファイルのうちconfig/webpack.config.jsの設定に以下の内容を追加する

    externals: {
      'react': 'React',
      'react-dom': 'ReactDOM'
    },

この設定でreactとreact-domがリリースファイルに同梱されなくなる。

後はpublic/index.htmlに、

    <script crossorigin src="https://unpkg.com/react@16.13.1/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.production.min.js"></script>

という記述を加えて、reactをCDN経由で利用するようにすればよい。

（バージョンはpackage.jsonのバージョンと合わせてある。リンク先はreactのマニュアルを参照した。）

再び

npx source-map-explorer 'build/static/js/*.js'

の結果をみてみると、リリースファイルからreact,react-domが除外され、ファイルサイズが大幅に小さくなっていることがわかる

他のパッケージについても同様の手順で対応できる。
また、条件文で制御することによりあるモードでのみCDNを利用するといった記述も可能である。