web-dev-qa-db-ja.com

ウォッチ機能を使用せずにwebpack / babelビルドのパフォーマンスを改善する方法は?

私はSBT/Scala Webプロジェクトに取り組んでおり、ES6の機能とフロントエンドJavaScriptレイヤーの新しいモジュール構文を活用したいと考えていました。 SBTには独自のビルドシステムがあり、既存のsbtプラグインを微調整して、webpackを実行してbabelを使用してJSファイルをビルドしました。現在の解決策は少し厄介ですが、sbtビルドシステム内で動作します。

問題は遅いです。すべての変更に対して、webpackの新しいインスタンスが作成され、すべてが完全にゼロからコンパイルされます。

私はsbtビルドシステムから飛び出し、開発段階でwebpackを個別に使用してファイルを監視および再構築できることを知っています。しかし、それをする前に、webpackのビルドプロセスを高速化する方法があるかどうか疑問に思っていました。

私はドキュメントをチェックしましたが、利用可能なキャッシングはメモリでのみ処理され、私の場合には適用できないようです。または、webpackビルドの別々の実行間で生き残るようなファイルキャッシュがありますか?たとえば、私のnpm依存関係はすべてほとんどの場合変更されないので、一度コンパイルして、キャッシュしてから単純に含めることができます...

24
tobik

考慮すべき構成:

35

問題は遅いことです。すべての変更に対して、webpackの新しいインスタンスが作成され、すべてが完全にゼロからコンパイルされます。

モジュールベースが大きくなったとき(3.5k +)、通常のMacBook 13ではwebpackがinitialビルド。

私たちが取ったアプローチは、変換フェーズ(基本的にwebpackローダー)を並列化することで、一部のマシンでビルド時間に関して最大​​で500%のゲインが得られました。 https://github.com/amireh/happypack をチェックして、プラグインが機能するかどうかを確認してください。

まだすべてのローダーをサポートしていませんが、babel-loaderがサポートされていますが、これはあなたが必要なものだと思います。

3
amireh

Webpackには、メインアプリケーションコードとは別にコンパイルできる「DLL」(別名「ライブラリバンドル」)を作成できる機能があります。

これを使用した典型的なワークフローは、一度だけコンパイルしてから独自のコード用にはるかに小さなアプリバンドルを作成するベンダーライブラリバンドルに、頻繁に変更しない大きなライブラリを配置することです。

ここでこれを行う方法についての投稿を書きました: https://robertknight.me.uk/posts/webpack-dll-plugins/

上記の@bebrawの提案のうち、特に1)既存の縮小ライブラリをバンドルに含める代わりにエイリアスする-ライブラリバンドルを作成するのと同じ利点を実現し、2)トランスパイラーを使用している場合は、 transpilerはmodule.loaders.(include|exclude)オプションを介して独自のコードでのみ実行され、_node_modules/_のライブラリコードのすべてではありません

2
Robert Knight