バンドルサイズの解析

Source map explorerは、ソースマップを使用してJavaScriptバンドルを分析します。コードの肥大化の発生源を把握できます。

Create React AppプロジェクトにSource map explorerを追加するには、次の手順に従います

npm install --save source-map-explorer

またはyarnを使用することもできます

yarn add source-map-explorer

次に、package.jsonのscriptsに次の行を追加します

   "scripts": {
+    "analyze": "source-map-explorer 'build/static/js/*.js'",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",

次に、バンドルを分析するには、本番環境ビルドを実行し、分析スクリプトを実行します。

npm run build
npm run analyze