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
注释掉全部内容,保存,即可。