Load performance


#1

I was just wondering whether there are any known techniques / low hanging fruit for performance gains in Electron?

I’m building an editor for ink - basically a simple text editor / IDE. When viewing the Timeline during load, I see the following on a Mid-2014 MacBook Pro 13":

As you can see, the load time is around 0.85s. It’s certainly not terrible, but it also doesn’t feel particularly snappy! In case you’re wondering the details of what’s on that timeline:

  • Between 400ms and 500ms, that’s loading Ace, the code editor.
  • Between 500ms and 800ms, that appears to be one big hierarchical require(), for all the main renderer code (basically, my renderer.js). I haven’t written a vast quantity of code myself, and my dependencies are lodash, chokidar, mkdirp and randomstring.
  • I believe the final “major chunk” around 800ms is loading jQuery.

This is my first Electron project, and I’m not very experienced with node.js either, so I’m wondering if there are any easy wins I can try? Is there anything special that happens/can happen when I run the electron packager to run in “production” v.s. “debug” etc? Or a way of somehow pre-compiling dependencies etc?


#2

Some apps with a lot of JS dependencies bundle them all together so that there is only one request being made to the file system rather than potentially thousands. Atom takes it a step further and handles de-duping of dependencies.


#3

That sounds very sensible! How would I go about doing that? I noticed that chokidar has quite a complex dependency tree, so it would be great if the whole thing could be bundled up a bit more tightly.


#4

You do that by packaging your app into an ASAR, and as far as I’m aware all the Electron packaging tools currently out there can do that for you.


#5

Thanks! Packaging into an ASAR was indeed very straightforward with electron packager, and I barely had to modify my code at all.

Unfortunately it doesn’t seem to have helped the timeline I posted above at all though :frowning: Perhaps I’m not seeing any of the savings because I’m recording the timeline after a refresh (rather than first time load), and perhaps even without packaging into an ASAR, node is able to cache the require paths…? Quite surprising in any case!


#6

I’m not sure how big influence it has to load a program from disk versus ssd versus memory. Typically, a heavily used web server serves file from memory.