WebpackでHot Module Replacementを使用する時のCPU使用率を改善する

Webpackを使ったウェブサイトの作成時にHot Module Replacementを使用するとnodeのCPU利用率が異常に高いので，原因を調べてみました．

webpackを起動します．

webpack-dev-server --open --hot

f:id:atsuhiro-me:20180125211901p:plain:w300

nodeのCPU使用率が32%もあります．よく見ると起動してから5秒であるにも関わらずUnix System Callsが2598288となっています．ファイルの監視に多大なリソースが使用されているのではと思い，/node_module/フォルダを無視する設定にしてみました．

Webpack公式ドキュメント*1を参考に以下の設定をwebpack.config.jsに追加しました．

  watchOptions: {
    aggregateTimeout: 300,
    ignored: /node_modules/
  }

この結果，nodeのCPU使用率は1%未満になりました．

f:id:atsuhiro-me:20180125212339p:plain:w300

Unix System Callsは起動後30秒経っても405883 (先程の1/5以下) しかありません．

どうやら，約30000のファイルが存在する/node_module/フォルダの監視が大変だったようです．

みーのぺーじ