Create React Appでinline scriptを使用しないようにビルドする

やりたいこと

Create React Appで開発したアプリを何も考えずビルドすると、JavaScriptのコードはbuild/index.htmlにインラインスクリプトとして埋め込まれます。

これをbuild/index.htmlから外部スクリプトとして、各種JavaScriptファイルを読み込むようにしたいです。

以下のようにmy-appという名前でアプリを作成したとします。

$ npx create-react-app my-app

my-appディレクトリ直下に.envという名前のファイルを作成します。

そして.envに以下を記述します。

INLINE_RUNTIME_CHUNK=false

これでnpm run buildを叩くと、JavaScriptのコードはインラインスクリプトではなく外部スクリプトとして読み込まれるようになります。実際にbuild/index.htmlを開いてみると、インラインスクリプトがなくなったことがわかると思います。