Googleのwireitでnpm runを超高速に実行する方法🚀
Summary
TLDRこの動画では、NPMスクリプトの実行速度を上げるためのライブラリー「ワイアー」について解説しています。ワイアーを使うことで、NPMスクリプトのキャッシュ機能が利用でき、2回目以降の実行が高速になります。実際にサンプルプロジェクトで試してみると、ビルド時間が4秒から0.1秒と劇的に短縮されたことが紹介されています。ワイアーは簡単に設定できるため、NPMスクリプトの実行効率化に役立つライブラリーだと解説しています。
Takeaways
- 😃 ワイヤライブラリーを使うとNPMスクリプトの実行を高速化できる
- 👍 パッケージJSONのビルドコマンドをワイヤ設定に変更することで高速化できる
- 🔨 ワイヤの設定方法は簡単で、hpm i -D wireitでインストール後設定ファイルを作成
- ✨ ワイヤはキャッシュ機能があるため、2回目以降のビルド時間が劇的に短縮される
- 📈 実例で4秒かかっていたビルドが0.1秒で完了するなど、実行速度が格段に向上
- 💡 ワイヤ設定では並列処理数を変更でき、デフォルトは1CPUコアにつき2つのスクリプトまで実行
- 📝 ソースファイルやビルド結果をファイル設定しておくことで、変更検知とキャッシュが効果的
- 🔎 ワイヤのキャッシュ機能により、変更のない部分のビルドがスキップされる
- ⏳ 複数のNPMスクリプトを実行する際、全体の所要時間を大幅に短縮できる
- 👍👍 NPMLANやビルドコマンドの実行速度改善にワイヤライブラリーが有効
Q & A
このビデオで紹介されているGoogleのライブラリーの名前は何ですか?
-ワイアット
ワイアットの主な機能は何ですか?
-NPMスクリプトをより高速に流せるようにすること
ワイアットを導入することでどのコマンドが劇的に早くなりますか?
-NPMLANコマンド
ワイアットを使用するためのインストールコマンドは何ですか?
-NPMのhphDのWi
ワイアットを導入した後のパッケージ.JSONの変更点は何ですか?
-ビルド時にTSCを流す設定からワイアと設定することへの変更
ワイアット導入後のビルドコマンドはどう変わりますか?
-元々あったコマンドをワイアITのビルドコマンドに設定する
ワイアットを使うことの利点は何ですか?
-実行結果をキャッシュしてくれるようになり、再ビルド時の速度を上げることができる
ワイアットで高速化したいスクリプトの設定方法は?
-スクリプトにワイアと設定し、Yと書き換える
ワイアット導入によるビルド時間の変化はどのように確認できますか?
-3JSのプロジェクトでビルドコマンドを流す前後で時間を比較する
ワイアット導入後にビルドが速くならなかった場合の対処法は?
-ファイルズを設定し、ソースファイルとアウトプットディレクトリーを指定する
Outlines
🚀 Googleのライブラリー「Wyatt」の紹介
このパートでは、Googleのライブラリー「Wyatt」について紹介されています。Wyattは、NPMスクリプトをより速く実行できるようにするライブラリーで、NPMパッケージと共に使用されます。導入することで、NPMランコマンドの実行速度が劇的に向上します。Wyattの使用方法について説明され、インストール方法からパッケージ.JSONの設定変更、具体的なコードの書き方までが詳しく説明されています。Wyattを利用することで、ビルドコマンドの実行結果をキャッシュして再利用することが可能になり、依存関係の設定や、CI環境での使用方法なども紹介されています。また、実際にWyattを導入することでどれだけビルド時間が短縮されるか、3JSプロジェクトを例にして紹介されています。
⏱ Wyattのパフォーマンス実証と活用方法
このセクションでは、Wyattのパフォーマンスを実際に示すデモンストレーションが行われ、ビルド時間が0.1秒まで短縮されることが実証されました。ソースコードに変更があった場合とない場合のビルドの挙動が説明され、Wyattがビルドをキャッシュして効率的に処理する様子が示されています。さらに、ビルドプロセスを並行して実行する方法と、そのための環境設定についても触れられています。最後に、Wyattを導入することの利点として、NPMスクリプトの実行時間の短縮が挙げられ、視聴者に対してWyattの使用を推奨しています。また、動画の終わりには、作者が提供するWEB制作や開発に関するコース、ハイレベルなスキルを学びたい人向けのサービス「ノトイコール」、プログラミングの学習支援のためのオンラインコミュニティ「コードトゲザー」についての紹介があります。
Mindmap
Keywords
💡NPM
💡スクリプト
💡ライブラリー
💡ビルド
💡キャッシュ
💡並行実行
💡コア
💡依存関係
💡トランスパイル
💡プログラミング力
Highlights
Googleのライブラリーのワイアットについて紹介
NPMスクリプトをより高速に流せるようにしてくれる
ビルドのコマンドにワイアと設定しキャッシュして高速化
実際にNPMビルドコマンドをワイアに変更し高速化を確認
ソース変更時はキャッシュ利用でビルドスキップできる
Transcripts
[音楽]
はいえ皆さんこんにちはこのマフィアです
ということでま今回はですねGoogle
のライブラリーのワイアットについて紹介
したいと思いますまこちらですね何する
ものかと言いますとNPMスクリプトを
より高速に流せるようにしてくれる
ライブラリーになってきますまえNPM
パッケージと一緒に使うんですけれどもま
これ導入することでえま劇的にですね
NPMLANコマンドが早くなるんでえま
その使い方について簡単に見ていきたいと
思いますでえ書き方なんですけれどもま
ちょっとバーっとありますがえまず使い方
としましてはNPMのhphDのWiとま
これでインストールを行ってでえ
パッケージ.JSONの中身をまこんな
感じで書き換えてくださいとなっています
でえこちら左側が元のコードになりまして
まこのビルドした時にTSCを流すとでえ
右側のアフターのところがまこれがワイヤ
導入した感じでまビルドのところにえ
ワイヤとえ設定しましてでで元々あった
コマンドはえこのワイヤITのビルドの
コマンドの中にまこのようにして設定する
とまこうすることによってえま実行結果を
キャッシュなんかしてくれるようになり
ますはいではえ実際にどんな感じで書くの
か見ていきましょうまこちらあらかじめ
ですね私の方で記述したものがあるんです
けれどもまこちらえスクリプトにはえ
ビルドのコマンド準備していましてえそこ
にワアと設定していますでえこのコマンド
が流れるとえこちらのワイヤITのビルド
の方が流れるということですねまこちらの
コマンド流れましてえでエコーで10が
表示されるという風になっていますではえ
実際に実行してみましょうまこちらビルド
を流しますまそうするとえこんな感じでえ
10と表示されてるんで実行されますとで
えこちらのワイアなんですけれどもま依存
関係を設定することなんかもできましてま
例えばですがえこちらCIとしてNPMの
えCIでまえクリーンインストールして
からビルドするようにしてみますでえこの
場合にはえこちらCIのコマンド追加し
ましたんでえこれちょっとコピーしとき
ましてワイアITの方にもえCIを追加
するとこちらNPMCをこのコマンドの方
に書かないといけないですねはいまこんな
感じで書きましてでスクリプトの方は
ワイア1にするとまなんでこれスクリプト
全てをですねワイア1にする必要はなくて
まこのワイア1を使って高速化したい
スクリプトだけまこのようにYとえ
書き換えれば大丈夫ですではえこれでCと
長ばえこちらの試合コマンド流れますんで
まこれを依存関係に追加しますまえこちら
え依存関係としてディペンデンシーまこれ
にえCIを追加しましょうまこのように
書くとですねワイアITのえCIコマンド
ますなわちこれですねまこれが実行されて
からえメインのコマンドが実行されるよう
になりますではこれでえNPMのラン
ビルドとして流すとまこんな感じでえCI
がえ走ってることが確認できますはいま
こんな感じでですね事前に流したい
コマンドを登録することもできますでは
ですねえ実際にえどんだけ早くなるかと
いうのをえ実際のプロジェクトで見てみ
たいと思いますまこちら3JSのえ
プロジェクトになってくるんですけれども
え例えばこのプロジェクトでですねま
ビルドコマンドなんかを流すとま大体4秒
ぐらいかかるんですねまこれえ
940mセとえ2.4とえ5mmセックな
んでま大体4秒ぐらいですねまえ時間が
かかるですけれどもえこれワイヤ1にえ
書き換えてみたいと思いますではえ
パッケージ.jonのえビルドコマンドな
んでえこちらですねまこちらのコマンドを
えワイヤーITに書き換えるとではえ
こちらワイヤーITとトとしましてでえ
ちょっと貼り付けておきますえコマンドの
中にえ先ほどのコマンド準備しましてま
これはこんな感じですかねでえこちらの上
の4のビルドコマンドはえワイヤITに
変更しておきますはいワイヤITとでえあ
はですねNPMのiのハDのワイヤITで
えインストールしておきますまこれで
書き換えは完了ですかねではえこれでです
ね実行してみましょうNPMRanビルド
とまちなみに1回目のビルドはですね
そんなに速度変わらないですねまこれ並行
して実行することもできるんですけれども
ま並行してえ実行しなかった場合にはそれ
ほど速度変わりませんはいということでえ
実行してみるとえ速度変わってないですが
そうですねこれはえファイルズまこれ出力
する先のファイルなんかをえま設定として
加えないといけないですねまなんでえ
こちらファイルズとしましてえソースのえ
3JSまこれ元になるファイルですねをえ
設定しておきますでえアウトプットの方も
設定した方がいいですねアウトプットとえ
アウト
Tが抜けてますねでえアウトプットはえ
ビルドディレクトリーですねまこれでえ
大丈夫かと思いますではえこれで実行し
ますとえ今瞬殺で終わりましたねはい
0.1秒で終わりましたねもう1回やって
みましょうかもう1回流してもえ0.1秒
で終わるとでえもしソースコードがえ変更
されていた場合にはま例えばですがこちら
えコンソールログとしてえま適当にハロー
と表示するようにしてきましょうかハロー
とまこんな感じで表示するようにしておい
てえであとはえビルド流してみるとま再び
えこのビルドが走るようになりますはいで
えこちらですねままたバとして軸をすると
ですねまたまビルドが走るんですけれども
まこれすごいなと思うのがま1回ですねえ
キャッシュしたものに関してはえビルドを
スキップしてくれますま例えば先ほど
ハローで1回ジクをしたんでまこの
キャッシュというのは残ってるんです
けれどもまこの状態でえビルドをかけると
もうこののキャッシュを使うようになっ
てるんでまこちらえビルドが省略されてえ
0.1秒で処理が完了しますまなのでえ
こんな感じでですね1回ビルドしたものに
関してはえま再びえビルドの行動を流さ
ないとまそういった処理が入っていること
になりますはいでえこちらですねy1と
並行して実行するという風にお伝えしたん
ですけれどもま基本的にはですねえこの1
つのCPUのコアに対して2つの
スクリプトまでえ並行して実行すると書い
てありますでもしえこの並行の数を変えた
場合にはえこちらのワイヤITパラレルと
いう環境変数の値を変更してくださいとま
これでえ変わりますよと書いてあります
はいということでえまこれがワイヤ1と
いうものになるんですがいかがでしょうか
まなかなかですねNPMスクリプトて流す
機会多いんで時間かかったりするんです
けれどもまえこちら興味のある方ですね
ワイヤ導入してえスクリプトの時間短縮に
務めてみてくださいはいということでえ
今回の動画はここまでになりますそれでは
また次の動画でお会いしましょうバイバイ
今回もご視聴いただきありがとうござい
ます私はえユミでWEB制作からWeb
開発まで幅広いコースを出していますので
興味のある方は是非概要欄からご覧
くださいまたさらにハイレベルなWEB
制作スキルを学びたい人向けにノト
イコールというサービスを運営しています
ので興味のある方はそちらも合わせて概要
欄の方でチェックしてみてください最後に
プログラミングの学習が1人で寂しい方は
無料のオンラインコミュニティコード
トゲザーを運営していますのでそちらも
概要欄から是非チェックしてみてください
それではご視聴ありがとうございました
javascriptの独学に最適な標準
教科書様々なサンプルプログラムを例示し
あなたのプログラミング力の上達を
サポートし
ます
5.0 / 5 (0 votes)