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

React

これは

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

ガイドのリンク

ja.reactjs.org

パフォーマンス最適化

本番用ビルドを使用する

Create React App
Browserify

BrowserifyはNode.js製のツールらしい。
Node.jsのコアモジュールやnpmをブラウザでも利用できるようにするもの。
browserify.org

Reactの本番用ビルドで使うための導入にはnpmやyarnを使う。

# If you use npm
npm install --save-dev envify terser uglifyify 

# If you use Yarn
yarn add --dev envify terser uglifyify

また以下の手順通りに必ず順番を守って変換をする必要がある。

　１．envify 変換は正しいビルド用の環境変数が確実に設定されるようにします。
　　　グローバルに設定してください (-g)
　２．uglifyify 変換は開発用にインポートしたライブラリを削除します。
　　　これもグローバルに設定してください (-g)。
　３．最後に結果として出力されたものを、名前の圧縮のために terser にパイプします
　　理由

terserとは
ES6 +用のJavaScriptパーサーおよびmangler / compressorツールキット。
github.com

例としては以下のようになる。

browserify ./index.js \
  -g [ envify --NODE_ENV production ] \
  -g uglifyify \
  | terser --compress --mangle > ./bundle.js

今日はここまで。