You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何以编程方式触发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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.28 07:27:46