electron-vue保存代码触发整个程序重新渲染

electron分为主进程和渲染进程，主进程为 Chromium ，渲染进程多为展示的页面，程序大部分展示的内容大多在渲染进程内，渲染进程内多为 Html、css、js。electron-vue脚手架帮我们搭建好了整个项目结构，直接拿去开发即可，然而该项目已经两年没有人维护了，项目已不再更新。

electron-vue 通过 webpack-hot-middleware 集成了热更新模块，然而在渲染进程修改代码并保存时会重新渲染整个程序，渲染进程修改的内容并不会直接影响到主进程，但是每次渲染整个程序的时间却远超前端代码打包时间，同时在重新渲染整个程序时，有时会出现不能 kill 掉上个程序所有进程的情况，导致所占用的内存资源越来越多，电脑越来越卡。这些是不必要的副作用。

解决办法：

文件：.electron-vue / dev-runner.js·

原内容：

...
const server = new WebpackDevServer(
      compiler,
      {
        contentBase: path.join(__dirname, '../'),
        quiet: true,
        before (app, ctx) {
          app.use(hotMiddleware)
          ctx.middleware.waitUntilValid(() => {
            resolve()
          })
        }
      }
    )

修改为：

const server = new WebpackDevServer(
      compiler, {
        contentBase: path.join(__dirname, '../'),
        quiet: true,
        hot: true, // <-- 
        before(app, ctx) {
          // app.use(hotMiddleware) // <-- 
          ctx.middleware.waitUntilValid(() => {
            resolve()
          })
        }
      }
    )

原因：
webpack-dev-server 带有热更新模块，不必使用 webpack-hot-middleware 的方案，webpack-dev-server 默认在 electron-vue 脚手架中，直接改配置就可以正常生效使用。

Next

按上述改完后，修改页面文件会优先进行局部更新，不再频繁触发整体更新，但是会出现一个新的问题，调试窗口的 Network 面板会频繁出现 _webpack_hmr 404 错误。

解决办法

文件 .electron-vue / dev-client.js 注释掉全部内容，保存，即可。