webpack熱更新最適化

2097 ワード

webpack熱更新最適化
問題の説明
多ページプロジェクトの開発において、開発環境の熱更新によって、ページの増加に伴って、熱更新のコンパイル時間はますます長くなります.本人プロジェクトは十数ページの場合、コンパイルは30 sに達します.これは時間の無駄です.以下は解決策です.
ソリューション
このような方案の構想は、開発環境の中で、一人一人が責任を負うのはすべて一部のモジュールあるいは部品で、だから熱い更新は自分の当面必要なページだけをコンパイルすることができて、すべてのページを全部コンパイルする必要がないです.selfConfig.js設定を作成して保存したいページを設定し、webpack設定では必要なページだけを編集して熱更新を行います.開発環境におけるコンパイル速度を速める.
// selfConfig.js
module.exports = [
    'imScence',
    'mLogin'
];
// webpack.base.conf.js  
//       
const selfConfig = require("./selfConfig");

for (let moduleName of modules) {
  if (selfConfig.length === 0) {
    devEntries[moduleName] = path.join(resolve('src'), 'modules', moduleName, 'main.js');
  } else {
    if (selfConfig.includes(moduleName)) {
      devEntries[moduleName] = path.join(resolve('src'), 'modules', moduleName, 'main.js');
    }
  }
  buildEntries[moduleName] = path.join(resolve('src'), 'modules', moduleName, 'main.js');
}
以上の事例の設定が完了したら、2つのページしか熱的に更新されませんでしたが、この案の弊害は、他のページのローカル環境が白スクリーンで開かれないということです.
注意:selfConfig.jsを修正するたびにwebpackサービスを再開する必要があります.