介绍
如果您还不了解，Electron是一个开放源代码框架，用于使用HTML，CSS和（duh）JavaScript构建跨平台的桌面应用程序。它最初被称为原子壳牌和被Github上开发的，支持他们的文本编辑器-atom。
一切听起来不错，对吗？您无需学习其他语言即可创建跨平台应用，而无需利用现有知识。
不幸的是，Electron有一些缺点。为了呈现您的应用程序用户界面，它使用Chromium，它始终捆绑在您的最终应用程序中。因此：
- 使用Electron构建的应用程序大小通常约为120 MB。
- 电子应用程序通常使用大量RAM。
- UI可能会感觉有点慢，尤其是在较旧的计算机上。
现在，即使我们不能只是从应用程序中删除整个Chromium并减小其大小，我们仍然可以对RAM的使用和速度进行一些处理。
这就是为什么我想向您展示4条提示，以帮助您更快地开发Electron应用程序！
1.使用V8引擎代码缓存
Chrome V8本质上是一个JavaScript引擎，可同时支持Node.js和Chromium浏览器。它的功能之一是代码缓存，它可以加快应用程序的实例化时间。
为了确保启用此功能，我们将使用Andres Suarezv8-compile-cache创建的名为的软件包：
# 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这样的模块捆绑器将启用诸如摇树和代码拆分之类的功能，这将使您的代码更小，更快。
3.使用更快的JavaScript方法，尤其是在使用DOM时
查看以下两行代码：
const elementOne = document.getElementById('one');
const elementTwo = document.querySelector('#one');
他们俩都做同样的事情-找到DOM元素。但是看看 性能基准：
性能基准
如您所见，第一种方法比第二种方法快2倍以上。是的-这并不意味着第二种方法很慢-两种方法在实际用例中都非常快，但是当我们在应用程序中使用许多较慢的方法时，将它们替换为较快的替代方法确实会有所作为！
4.使用WebAssembly（或本机插件）
这项更改确实可以加快您的应用程序的速度，但是它也需要大量的工作。
例如，如果您的应用程序必须非常快速地计算大量数据或检查大量数据，则JavaScript可能会太慢😢
正是在这样的时候，WebAssembly和本机插件才派上用场！
看一下我的Electron应用程序-计算器elcalc。要做到更先进的数学，我使用了一种叫做非常好的库math.js。不幸的是，当我测试高级和复杂的计算时，在单击评估按钮和显示结果之间存在明显的超时。不好...
我决定编写一个简单的Rust代码，该代码将处理数学并将其转换为WASM（WebAssembly的简写）。我使用了一个称为的板条箱（类似于npm包，但对于Rust而言）meval，它可以解析数学表达式并对其求值。
为了实际生成WASM，我使用了wasm-pack及其rust-webpack-template。
我还使用了一个Webpack插件，称为optimum-wasm-webpack-plugin ，该插件（如其名称所示）使用binaryen优化了WebAssembly文件。
为了将WASM函数延迟加载到我的JavaScript代码中，我使用了动态导入建议：
import('../crate/pkg').then(async module => {
// do something
});
现在我的计算器可以更快地计算数学表达式🚀
奖励：5.如果您关心应用程序的大小，请使用其他工具
如果您非常在意应用程序的大小，可以使用Electron的替代品Carlo。它没有在您的应用程序捆绑包中包含Chromium，而是使用了用户计算机上本地安装的Google Chrome浏览器。
不幸的是，这意味着当用户未安装Google Chrome时，您的应用将无法启动，并且会显示错误。
学分
这篇文章中列出的一些建议摘自
Felix Rieseberg的Medium文章，该文章称为“快速和慢速桌面上的JavaScript”。我强烈建议您检查一下！
感谢您阅读我的帖子！我希望你会发现它有用;）
网友评论