如何以编程方式触发Webpack增量重建?
Webpack MultiCompiler 性能问题与Gulp触发编译的疑问
Webpack搭配multicompiler使用时性能表现糟糕,尤其开启watch: true后,多个Watcher会占用大量系统资源,甚至引发内存溢出错误:
<--- Last few GCs ---> [29700:0000022696A23110] 869488 ms: Mark-sweep 4009.8 (4138.0) -> 3997.0 (4141.2) MB, 1671.9 / 0.0 ms (average mu = 0.449, current mu = 0.024) allocation failure; scavenge might not succeed [29700:0000022696A23110] 872444 ms: Mark-sweep 4013.0 (4141.2) -> 4000.1 (4144.2) MB, 2919.2 / 0.0 ms (average mu = 0.224, current mu = 0.012) allocation failure; scavenge might not succeed <--- JS stacktrace ---> FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory 1: 00007FF630979E7F node_api_throw_syntax_error+175967 2: 00007FF630900C06 SSL_get_quiet_shutdown+65750 3: 00007FF630901FC2 SSL_get_quiet_shutdown+70802 4: 00007FF63139A214 v8::Isolate::ReportExternalAllocationLimitReached+116 5: 00007FF631385572 v8::Isolate::Exit+674 6: 00007FF6312073CC v8::internal::EmbedderStackStateScope::ExplicitScopeForTesting+124 7: 00007FF6312045EB v8::internal::Heap::CollectGarbage+3963 8: 00007FF63121A823 v8::internal::HeapAllocator::AllocateRawWithLightRetrySlowPath+2099 9: 00007FF63121B0CD v8::internal::HeapAllocator::AllocateRawWithRetryOrFailSlowPath+93 10: 00007FF63122A903 v8::internal::Factory::NewFillerObject+851 11: 00007FF630F1BEB5 v8::internal::DateCache::Weekday+1349 12: 00007FF6314378B1 v8::internal::SetupIsolateDelegate::SetupHeap+558193 13: 00007FF6313BAE63 v8::internal::SetupIsolateDelegate::SetupHeap+47651 14: 00007FF5B37BB7A3 Process finished with exit code 134
我目前在Gulp中直接使用Webpack(未用webpack-stream),已经为.js和.ts文件配置了Gulp监听器,如果能通过它触发Webpack编译应该就能解决问题,相关代码如下:
const webpackCompilers: Webpack.MultiCompiler = webpack( [ { entry: './index1.js', output: { filename: 'bundle1.js' } }, { entry: './index2.js', output: { filename: 'bundle2.js' } }, ], (err, stats) => { process.stdout.write(stats.toString() + '\n'); } ); gulp.watch( "*.ts", (callback: () => void): void => { webpackCompilers.run((): void => { // ... callback(); }); } };
虽然Webpack提供了run方法,但我不确定它执行的是冷启动(非期望结果)还是增量重建(期望结果)。
为何不用Webpack自带的监听器?
我需要3个编译器:分别用于前端(浏览器运行时)、后端(NodeJS运行时)、PostgreSQL数据源(NodeJS运行时,但需暴露导入)。据我所知,因预设不兼容,无法用单个Webpack编译器实现。3个编译器会带来3个Watcher、3个TypeScript类型检查器和3个ES代码检查器,即便在64GB内存的高配电脑上,项目构建也需超1分钟,重建速度更是慢到无法工作。
我已将代码检查委托给Gulp并实现缓存,这样所有文件只需一个优化后的检查器,但增量构建时需额外Gulp监听器触发检查。下一步需将文件监听委托给Gulp(即本次问题主题),并将TypeScript类型检查也委托给Gulp。
内容的提问来源于stack exchange,提问作者Takeshi Tokugawa YD
相关产品推荐
相关产品推荐

