こんにちは、CX開発Gでエンジニアをしているn-black-catです。
弊社の一部のプロダクトではWebpackを利用してビルドを行っていますが、使用している箇所のビルド時間が長くなっていることが社内で話題に上がりました。 問題の原因を探るために、Webpackのビルドログの詳細を出力したいと考えました。
しかし、その方法を調べる中で、日本語の記事や資料が極端に少なくとても苦労しました。
そこで、これから同じ問題に直面する方のため、また自分のための備忘録として、その方法をこちらに記録しておきたいと思います。
TL;DR
- コマンドラインでの設定
--stats verboseを追加
webpack --mode=production --config webpack.config.js --stats verbose
- webpack.config.jsへの設定
statsオプションにvervoseを設定
module.exports = {
//...
stats: 'verbose',
};
- 実行例
statsオプションとは
ビルド時のバンドル情報の表示を制御することができます。
オプション一覧
statsオプションには様々な設定があり、以下に、主な設定と出力例を記載していきます。
errors-only
エラーが発生した時のみ出力する
module.exports = {
//...
stats: 'errors-only',
};
errors-warnings
警告とエラーのみ出力する
module.exports = {
//...
stats: 'errors-warnings',
};
minimal
エラーや新規コンパイルが発生した時のみ出力する
module.exports = {
//...
stats: 'minimal',
};
none
何も出力しない stats:false でも代用できます。
module.exports = {
//...
stats: 'none',
};
module.exports = {
//...
stats: false,
};
normal
標準的な出力 stats:true でも可能
module.exports = {
//...
stats: 'normal',
};
module.exports = {
//...
stats: true,
};
detailed
chunkModulesとchunkRootModules以外を出力する
module.exports = {
//...
stats: 'detailed',
};
summary
webpackのバージョン、警告回数、エラー回数を出力する。
module.exports = {
//...
stats: 'summary',
};
原因の特定
今回はverboseオプションを使用して全てのログを出力して原因を特定しました。
出力内容を確認したところほとんどのログが以下のようなものでした。
harmony ~ ログは、WebpackがECMAScript 6（ES6）のコードを解析している際に生成されます。
このことから依存性の解決に時間がかかっており、プログラムサイズを減らすしか根本対応がないことが判明しました。
そのため、特にwebpack側の設定を変更したりはせず対応を終了しました。
おわりに
ホワイトプラスでは、ビジョンやバリュー、そしてホワイトプラスの開発文化に共感していただけるエンジニアを募集しています！
ネットクリーニングの「リネット」など「生活領域×テクノロジー」で事業を展開している会社です。どんな会社か気になった方はオウンドメディア「ホワプラSTYLE」をぜひご覧ください。
オンラインでカジュアル面談もできますので、今回の記事の内容に興味を持っていただけたら、ぜひお気軽にお問い合わせください。
