Electron Plugin

A better Renderer management plugin designed for Electron

CodeElectronNpm PackagesNodejsTypeScript

Where the idea came from

The inspiration for this plugin actually came from a rather interesting place: one day I was checking the memory usage of the Mac WeChat client and noticed this:

I noticed that my WeChat had three Renderers running, so I tried restarting WeChat and saw this:

I found that one of the Renderers was gone. To figure out where that renderer came from, I tried opening Moments. The moment I opened Moments, it appeared. Then I closed Moments, and an hour later I found that Renderer was still there, still holding on to more than 40 MB of my memory! Unless you restarted the app, there was no way to get rid of it.

At first I thought this was only a WeChat problem, but then I opened QQ, opened many different Electron apps, and even wrote a minimal test app of my own — and it turned out nearly every Electron app has this problem!

As shown below:

Because most Electron apps today are built on top of mature web frameworks like React Router or Vue Router, the situation ends up like this: as long as a Renderer stays open, it never closes itself; and once enough of them pile up, Renderers keep stacking on top of each other.

Like this:

For underpowered machines, or machines busy with other important work, this situation can be fairly dangerous.

So I decided to write a plugin to take care of this!

Writing the plugin

To be on the safe side while writing it, I checked Electron's documentation on this topic:

Clearly, in the official wording Electron is quite confident that Renderers are definitely destroyed when they are not in use.

But here is the thing: did Electron actually do that? The answer is: no. And this problem is not a new discovery — it has been around since 2019, seven years ago.

The related issue on the Electron repo: electron/electron#20277

Then another five years went by — it is now 2026, and the latest version of Electron still has this problem. What a makeshift operation!

While reading the docs, I also noticed a detail that deserves attention:

In Electron, a single Renderer may be responsible for rendering several Pages at once, so the plugin has to be careful about one thing: a Renderer should only be terminated using Chromium's task lifecycle (default: 15 minutes) when it has no pages left. (This is for compatibility and to keep the plugin's footprint minimal, so it relies directly on Chromium's task lifecycle management.)

In the end this became the plugin, published on npmjs.

Repository: CherryCuteCN/Smart-Renderers