Reactガイドを読んでいくその68

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

パフォーマンス最適化

本番用ビルドを使用する

Create React App

Rollup

この記事も参考になりそう。

qiita.com

導入にはプラグインを入れる。

# If you use npm
npm install --save-dev rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-terser

# If you use Yarn
yarn add --dev rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-terser

今回も順番に気を付けてそれぞれ設定していくことが重要となる。

１．replace プラグインは正しいビルド用の環境変数が確実に設定されるようにします。  
２．commonjs プラグインは Rollup で CommonJS をサポートできるようにします。  
３．terser プラグインは出力された最終的なバンドルを圧縮し、mangle（訳注：変数名や識別子を短縮）します。  

こんな感じになる。

plugins: [
  // ...
  require('rollup-plugin-replace')({
    'process.env.NODE_ENV': JSON.stringify('production')
  }),
  require('rollup-plugin-commonjs')(),
  require('rollup-plugin-terser')(),
  // ...
]

この設定は本番用ビルドだけに適用すべきであるため、それ以外の時は使用しないこと。

今日はここまで。