Googleのwireitでnpm runを超高速に実行する方法🚀

マフィア先生のエンジニア塾

28 Feb 202407:57

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

00:00

🚀 Googleのライブラリー「Wyatt」の紹介

このパートでは、Googleのライブラリー「Wyatt」について紹介されています。Wyattは、NPMスクリプトをより速く実行できるようにするライブラリーで、NPMパッケージと共に使用されます。導入することで、NPMランコマンドの実行速度が劇的に向上します。Wyattの使用方法について説明され、インストール方法からパッケージ.JSONの設定変更、具体的なコードの書き方までが詳しく説明されています。Wyattを利用することで、ビルドコマンドの実行結果をキャッシュして再利用することが可能になり、依存関係の設定や、CI環境での使用方法なども紹介されています。また、実際にWyattを導入することでどれだけビルド時間が短縮されるか、3JSプロジェクトを例にして紹介されています。

05:00

⏱ Wyattのパフォーマンス実証と活用方法

このセクションでは、Wyattのパフォーマンスを実際に示すデモンストレーションが行われ、ビルド時間が0.1秒まで短縮されることが実証されました。ソースコードに変更があった場合とない場合のビルドの挙動が説明され、Wyattがビルドをキャッシュして効率的に処理する様子が示されています。さらに、ビルドプロセスを並行して実行する方法と、そのための環境設定についても触れられています。最後に、Wyattを導入することの利点として、NPMスクリプトの実行時間の短縮が挙げられ、視聴者に対してWyattの使用を推奨しています。また、動画の終わりには、作者が提供するWEB制作や開発に関するコース、ハイレベルなスキルを学びたい人向けのサービス「ノトイコール」、プログラミングの学習支援のためのオンラインコミュニティ「コードトゲザー」についての紹介があります。

Mindmap

Keywords

💡NPM

Node.js用のパッケージマネージャー。JavaScriptのライブラリやツールをインストール・管理できる。

💡スクリプト

プログラムのコード。動画ではNPMスクリプトのことを指す。タスクランナーとして利用される。

💡ライブラリー

再利用可能なコードの集まり。動画ではWyattというライブラリーを紹介している。

💡ビルド

ソースコードから実行可能なプログラムを生成する処理。動画ではビルド時間の短縮をテーマにしている。

💡キャッシュ

データを一時的に保管する領域。Wyattは以前のビルド結果をキャッシュすることで高速化を実現している。

💡並行実行

複数の処理を同時に実行すること。Wyattは並行実行に対応し、速度向上に役立てている。

💡コア

CPU内の演算処理を担う部分。Wyattは1コアにつきスクリプト2つまで並行実行できると説明されている。

💡依存関係

他のライブラリやコンポーネントが必要なこと。Wyattでタスクの順序づけができる。

💡トランスパイル

コードを別の形式に変換すること。動画ではTypeScriptがJavaScriptに変換される例が出ている。

💡プログラミング力

プログラミングに関する知識と技術のレベル。動画の最後にJavaScriptの学習用教材が紹介されている。

Highlights

Googleのライブラリーのワイアットについて紹介

NPMスクリプトをより高速に流せるようにしてくれる

ビルドのコマンドにワイアと設定しキャッシュして高速化

実際にNPMビルドコマンドをワイアに変更し高速化を確認

ソース変更時はキャッシュ利用でビルドスキップできる