如何让你的 Electron 应用运行更快🚀⚡

你刚刚用 Electron 创建了一个漂亮又炫酷的新应用。它运行正常，用户界面也很美观。 占用大量内存和 速度慢， 正确的？

介绍

如果你还不知道的话，Electron是一个开源框架，用于使用 HTML、CSS 和（当然）JavaScript 构建跨平台桌面应用程序。它最初名为 Atom Shell，由 GitHub 开发，用于支持其文本编辑器Atom。

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

遗憾的是，Electron 也存在一些缺点。它使用 Chromium 来渲染应用程序的 UI，而 Chromium 总是会被打包到最终的应用程序中。正因如此：

• 使用 Electron 构建的应用程序大小通常在 120 MB 左右。
• Electron 应用通常会占用大量内存。
• 用户界面可能会感觉有点慢，尤其是在老旧的电脑上。

虽然我们不能直接从应用程序中删除整个 Chromium 并减小其大小，但我们仍然可以对 RAM 使用情况和速度采取一些措施。

因此，我想向大家展示 4 个让你的 Electron 应用运行更快的技巧！

1. 使用 V8 发动机代码缓存

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

为了确保启用此功能，我们将使用v8-compile-cache由Andres Suarez创建的名为 的软件包：

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

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

require('v8-compile-cache');

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

注：查看基准测试结果，了解v8-compile-cache热门模块的加速效果😄

2. 使用模块打包器

这条建议在规模较大、使用大量软件包的项目中尤其有用。使用像Webpack这样的模块打包工具可以启用诸如tree shaking和代码分割之类的功能，从而使你的代码更小、运行速度更快。

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

3. 使用更快的 JavaScript 方法，尤其是在操作 DOM 时。

请看以下两行代码：

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

它们都做同样的事情——找到 DOM 元素。但请看性能基准测试：

正如你所见，第一种方法比第二种方法快两倍以上。当然，这并不意味着第二种方法很慢——在实际应用中，这两种方法都很快，但是当我们在应用程序中使用大量较慢的方法时，用更快的替代方案替换它们确实能带来显著的性能提升！

4. 使用 WebAssembly（或原生插件）

这项改变确实可以加快您的申请速度，但同时也需要投入最多的精力。

例如，如果你的应用程序需要快速计算非常大的数字或检查大量数据，JavaScript 可能太慢了😢

这时，WebAssembly和原​​生插件就派上用场了！

来看看我的 Electron 应用——elcalc，一个计算器。为了进行更高级的数学运算，我使用了一个非常棒的库math.js。可惜的是，在测试一些高级和复杂的计算时，点击计算按钮到结果显示之间存在明显的延迟。这可不太好……

我决定用 Rust 写一段简单的代码来处理数学运算并将其转换为 WASM（WebAssembly 的缩写）。我使用了一个名为 `mash` 的 crate（类似于 npm 包，但用于 Rust）meval，它可以解析数学表达式并求值。

为了实际生成 WASM，我使用了wasm-pack及其rust-webpack-template。

我还使用了一个名为optimize-wasm-webpack-plugin 的
Webpack 插件，它（顾名思义）使用binaryen优化 WebAssembly 文件。

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

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

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

额外提示：5. 如果你在意应用体积，请使用其他方案。

如果您非常在意应用的大小，除了 Electron 之外，还有一种名为Carlo的替代方案。它不会在应用包中包含 Chromium，而是使用用户计算机上本地安装的 Google Chrome 浏览器。

遗憾的是，这意味着当用户没有安装谷歌浏览器时，您的应用将无法启动并显示错误信息。

鸣谢

本文中的一些建议来自
Felix Rieseberg发表于Medium 的文章《桌面 JavaScript：速度与速度》。我强烈推荐大家阅读这篇文章！

感谢阅读我的帖子！希望对您有所帮助 ;)