はじめに
Reactでアプリを作る際、create-react-appと同様にターミナルで行っている、Node.jsのbuild toolである「npm run build」
なんとな〜くの理解で機械的に行っていたので、その概要を整理する
npm run buildは何をしているのか
ずばり「JSファイルやCSSファイルをマージ（合併）している」
ではなぜマージするのか？
開発段階では以下のように1つのアプリに対しJSやCSSファイルが複数存在することがほとんど
css/
mpp.css
design.css
visuals.css
...
js/
service.js
validator.js
container.js
...
しかしアプリの運用環境では複数のファイルが存在することはサイトの読み込みが遅くなることに繋がります
（ユーザーがサイトにアクセスすると、各ファイルに追加のHTTPリクエストが必要になる為）
なのでこの複数存在するファイルをマージしbuildという小さなディレクトリに圧縮する魔法のコマンド、それが「npm run build」
実行すると、、
build/
static/
css/
main.css
js/
main.js
buildディレクトリが作成されスッキリ
これによりユーザーが取得するファイルの数とサイズを最小限に抑えることができました
おわりに
buildによるサイト表示速度改善問題
しかし規模の大きい開発ならまだしも、個人開発レベルでは恩恵は皆無といっていいそうな
↧