Node.js 与react和express捆绑的更智能的网页包

我有一个react应用程序，它在express服务器上运行，并与webpack捆绑。我的问题是，每当我重新启动服务器时，比如我对其进行更改时，重建前端捆绑包需要花费很长时间，即使我没有对前端进行任何更改

在进行不涉及前端捆绑包的服务器/api更改时，最好只重新加载服务器部分并保留当前前端捆绑包

以下是在开发环境中运行的代码：

 const compiler = webpack(webpackConfig)
  const middleware = webpackMiddleware(compiler, {
    publicPath: webpackConfig.output.publicPath,
    contentBase: 'src',
    stats: {
      colors: true,
      hash: false,
      timings: true,
      chunks: false,
      chunkModules: false,
      modules: false
    }
  })

  app.use(middleware)
  app.use(webpackHotMiddleware(compiler))
  app.get('*', (req, res) => {
    res.write(middleware.fileSystem.readFileSync(path.join(__dirname, 'build/app.html')))
    res.end()
  })

有没有更聪明的方法？是否可以将当前前端捆绑包保留在内存中，然后重新加载服务器？或者我是否可以检测捆绑包是否需要更新，如果不需要更新，则跳过该过程

---

欢迎任何提示、建议和建议！如果您需要任何其他信息，请告诉我。谢谢

Chokidar解决方案

如果使用webpack开发工具，则可以使用一个很好的库来查看更改

Chokidar仍然依赖Node.js核心fs模块，但在使用 用于监视的fs.watch和fs.watchFile，它规范化它所包含的事件 接收，通常通过获取文件统计信息和/或目录来检查真相 内容

下面是一个使用chokidar仅监视targetfolder的小示例。通过只针对一个特定的文件夹，您可以保持前端完好无损。我还没有为您的特定用例尝试过这一点，但乍一看，这似乎可以满足您的需求

var production=process.env.NODE\u env==='production'
如果（！生产）{
var chokidar=require（'chokidar'）
var watcher=chokidar.watch（“./targetfolder”）
watcher.on（'ready'，function（）{
watcher.on（'all'，function（）{
console.log（“从服务器清除/targetfolder/module缓存”）
Object.key（require.cache）.forEach（函数（id）{
如果（/[\/\\]targetfolder[\/\\]/.test（id））删除require.cache[id]
})
})
})
}

Github上有一个很好的例子，叫做

注意：WebpackDev服务器不会将文件写入磁盘，它通过一个Express实例提供内存结果。但webpack——watch会将文件写入磁盘

标志解决方案

您可以使用webpack的--watch标志

在package.json中，启动服务器的脚本块（或运行webpack的脚本块），添加此

webpack--progress--colors--watch

看，上面写着：

我们不想在每次更改后手动重新编译

使用监视模式时，webpack会对编译过程中使用的所有文件安装文件监视程序。如果检测到任何更改，它将再次运行编译。启用缓存后，webpack会将每个模块保留在内存中，如果不更改，它将重新使用

package.json中的示例：

“脚本”：{
“开发人员”：“网页包--进度--颜色--监视”
}

我在SpringBoot应用程序中遇到了这个问题，我可以快速重建包，但这不一定会让服务器查看实际文件夹并发现它实时存在。因此，您真正需要做的是有一种方法来配置您的服务器，使其始终在本地文件夹中查找bundle.js文件，而不是从WAR/JAR或通常从何处提取它。这不是“网页问题”。这是一个如何让服务器直接从文件夹上的bundle.js读取的问题。我会给你Spring的方法，但这不是你的架构。

webpack是在server.js文件中运行的，

webpack-dev-middleware

模块提供了一个

lazy

选项，它似乎反映了你引用的内容，但我认为这并不能解决问题，停止服务器会从内存中删除构建，不是吗？@ShanRobertson，我编辑了我的回复。如果你是一个公共回购工作，请分享链接，这样我可以测试出来<代码>懒惰：真表示不监视，但仅当lazy设置为false时，对每个请求重新编译才有效。webpack dev服务器不会将文件写入磁盘，它通过Express实例提供内存结果。但是webpack——watch会将文件写入磁盘，这样您就可以保留构建。