如何使你的Electron App 运行更快（译文）

How to make your Electron app faster 🚀⚡

如何使你的Electron应用更快 

 

So you just made a nice & shiny new app with Electron. It works as expected, has a beautiful UI, eats a lot of RAM and is slow, right?

是这样的，你刚刚用 Electron 开发了一个漂亮的新应用。它工作正常，有一个漂亮的用户界面，但是消耗了大量的内存，速度很慢，对吧？

Introduction 引言

If you don't know that already, Electron is an open-source framework for building cross-platform desktop applications using HTML, CSS & (duh) JavaScript. It was initially called Atom Shell and was developed by Github to power their text editor - Atom.

如果您还不知道，Electron 是一个开源框架，用于使用 HTML、 CSS 和(duh) JavaScript 构建跨平台的桌面应用程序。它最初叫做 Atom Shell，由 Github 开发，用于为他们的文本编辑器 Atom 提供电源。

Everything sound great, right? You don't need to learn another language to create cross-platform apps and instead utilize your existing knowledge.

一切听起来都很棒，对吧？你不需要学习另一种语言来创建跨平台的应用程序，而是利用你现有的知识。

Unfortunately, Electron has some downsides. To render your application UI, it uses Chromium, which is always bundled in your final application. Because of that:

不幸的是，电子有一些缺点。为了呈现你的应用程序 UI，它使用 Chromium，它总是捆绑在你的最终应用程序中。正因为如此:

• Size of application built with Electron is typically around ~120 MB. 用 Electron 构建的应用程序的大小通常在120 MB 左右
• Electron apps usually use a lot of RAM. 电子应用程序通常使用大量内存
• UI might feel a bit slow, especially on the older computers. 用户界面可能会感觉有点慢，尤其是在旧电脑上

Now, even though we can't just delete the whole Chromium from our app and reduce it's size, we can still do something about the RAM usage & speed.

现在，即使我们不能从我们的应用程序中删除整个 Chromium 并缩小它的大小，我们仍然可以在内存使用和速度方面做一些事情。

That's why I would like to show you 4 tips on how to make your Electron app faster!

这就是为什么我想向你展示4个技巧，如何使你的 Electron 应用程序更快！

1. Use V8 Engine code cache 

1. 使用 V8引擎代码缓存

Chrome V8 is basically a JavaScript engine, that powers both Node.js & Chromium browser. One of it's feature is the code caching, which can speed up instantiation time of you app.

V8基本上是一个 JavaScript 引擎，支持 Node.js 和 Chromium 浏览器。它的一个特性是代码缓存，可以加快应用程序的实例化时间。

To make sure this feature is enabled, we will use a package called v8-compile-cache, created by Andres Suarez:

为了确保启用这个特性，我们将使用 Andres Suarez 创建的 v8-compile-cache 包:

# Install the package
$ npm install v8-compile-cache

and then, in your entry module add the following code:

然后，在你的输入模块中添加以下代码:

require('v8-compile-cache');

// or, using ES6 `import`:
// import 'v8-compile-cache';

Note: Take a look at the benchmarks to see how v8-compile-cache speeds up popular modules 😄

注意: 看一下基准测试，看看 v8-compile-cache 是如何加速流行模块的

2. Use a module bundler

2. 使用模块捆绑器

This suggestion is especially useful in larger projects, that use a good amount of packages. Using a module bundler, like Webpack will enable features like tree shaking and code splitting, which will make your code smaller & faster.

这个建议在使用大量软件包的大型项目中特别有用。使用像 Webpack 这样的模块捆绑器，可以实现像摇树和代码分割这样的功能，这将使你的代码变得更小更快。

You will also be able to use some of the community-made plugins & loaders.

您还可以使用一些社区制作的插件和加载程序。

3. Use faster JavaScript methods, especially when working with DOM

3. 使用更快的 JavaScript 方法，特别是在使用 DOM 时

Look at the following 2 lines of code:

看看下面两行代码:

const elementOne = document.getElementById('one');
const elementTwo = document.querySelector('#one');

They both do the same thing - find the DOM element. But take a look at the performance benchmark:

它们都做同样的事情——找到 DOM 元素，但是看一下性能基准:

 

As you can see, the first method is more than 2 times faster, than the second one. And yes - that does not mean, that the second method is slow - both are really fast in practical use cases, but when we use a lot of slower methods in our application, replacing them with faster alternatives can really make a difference!

正如你所看到的，第一种方法比第二种方法快2倍多。是的——这并不意味着，第二种方法是慢的——两种方法在实际用例中都非常快，但是当我们在应用程序中使用很多较慢的方法时，用更快的替代方法替换它们真的会有所不同！

4. Use WebAssembly (or native addons) 

4. 使用 WebAssembly (或者本地插件)

This change can really speed up you application, but it also requires the most amount of work.

这种改变确实可以加快应用程序的速度，但它也需要大量的工作。

If your application has to, for example, calculate on a very big numbers really fast or inspect large amounts of data, JavaScript might be too slow 😢

例如，如果您的应用程序必须非常快地计算一个非常大的数字或检查大量的数据，那么 JavaScript 可能太慢了

That's exactly when WebAssembly and native addonscomes in handy!

这正是我们的组合和本地插件派上用场的时候！

Take a look at my Electron application - elcalc, a calculator. To do more advanced math, I used a really nice library called math.js. Unfortunately, when I was testing advanced & complex calculations, there was a noticeable timeout between clicking the evaluate button and the result showing up. Not good...

看看我的电子应用程序-elcalc，一个计算器。为了进行更高级的数学计算，我使用了一个非常好的名为 math.js 的库。不幸的是，当我在测试高级和复杂的计算时，单击 evaluate 按钮和显示结果之间出现了明显的超时。情况不妙。

I decided to write a simple Rust code, that will handle the math & convert it to WASM (shorthand for WebAssembly). I used a crate (something like npm package, but for Rust) called meval, that parses math expressions and evaluated them.

我决定编写一个简单的 Rust 代码，它将处理数学并将其转换为 WASM (WebAssembly 的缩写)。我使用了一个名为 meval 的板条箱(类似于 npm 包，但用于 Rust) ，它解析数学表达式并求值。

To actually generate the WASM, I used wasm-pack and it's rust-webpack-template.

为了实际生成 WASM，我使用了 WASM-pack 和它的 rust-webpack-template。

I also used a Webpack plugin, called optimize-wasm-webpack-plugin 
, that (as it's name says) optimized WebAssembly files using binaryen.

我还使用了一个 Webpack 插件，叫做 optimize-wasm-Webpack-plugin，它使用 binaryen 对 webbassembly 文件进行了优化。

And to lazy-load the WASM function in my JavaScript code, I used the dynamic import proposal:

为了延迟加载 JavaScript 代码中的 WASM 函数，我使用了动态导入提议:

import('../crate/pkg').then(async module => {
    // do something
});

Now my calculator evaluates math expressions much faster 🚀

现在我的计算器计算数学表达式的速度快多了

BONUS: 5. If you care about app size, use something else 

附加条件: 5. 如果你关心应用程序的大小，可以使用其他东西

If you care much about your app size, there is an alternative to Electron, called Carlo. Instead of including Chromium in your app bundle, it uses the locally installed Google Chrome browser on user's computer.

如果你非常关心你的应用程序的大小，还有一个可以替代 Electron 的选择，叫做 Carlo。它使用的是用户电脑上本地安装的 Google Chrome 浏览器，而不是你的应用程序包中包含 Chromium。

Unfortunately this means that when user does not have Google Chrome installed, your app won't launch and it will display an error.

不幸的是，这意味着当用户没有安装谷歌浏览器，你的应用程序将不会启动，它将显示一个错误。

Credits 

建议

Some suggestions listed in this post were taken from 
Felix Rieseberg's Medium article, called "JavaScript on the Desktop, Fast and Slow". I highly recommend checking it out!

这篇文章中列出的一些建议来自 felix Rieseberg 的 Medium 文章，题为“桌面上的 JavaScript，快和慢”。我强烈推荐你去看看！

Thank you for reading my post! I hope you will find it useful ;)

谢谢你阅读我的帖子，希望你会觉得有用