어떻게 하면 당신의 전자 응용을 더욱 빨리 할 수 있습니까🚀⚡

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 는 HTML, CSS, (duh) 자바스크립트를 사용하여 크로스플랫폼 데스크톱 프로그램을 구축하는 소스 프레임워크입니다.애초 Atom Shell로 불리며 Github에서 개발한 것으로 이들의 텍스트 편집기Atom에 동력을 제공한다.
모든 것이 듣기에 매우 좋다, 그렇지?크로스플랫폼 응용 프로그램을 만드는 데 다른 언어를 배울 필요가 없고, 기존의 지식을 활용할 필요가 있다.
불행히도 전자는 약간의 결점이 있다.Chromium은 응용 프로그램 UI를 렌더링하기 위해 항상 최종 응용 프로그램에 번들로 묶여 있습니다.따라서

Electron을 사용하여 구축된 어플리케이션의 크기는 보통 120MB입니다.

전자 응용 프로그램은 보통 대량의 메모리를 사용한다.

사용자 인터페이스가 좀 느릴 수 있는데, 특히 낡은 컴퓨터에서는 그렇다.

현재, Google 프로그램에서 전체 크롬을 삭제하고 크기를 줄일 수 없어도, RAM의 사용과 속도에 대해 뭔가를 할 수 있습니다.
이것이 바로 내가 너에게 어떻게 너의 전자 응용을 더욱 빨리 할 수 있는 네 가지 기교를 보여주고 싶은 이유이다.

1. V8 엔진 코드 캐시 사용

Chrome V8은 기본적으로 자바스크립트 엔진으로 두 노드에 동력을 제공한다.js & Chromium 브라우저.그것의 한 기능은 code caching인데 응용 프로그램의 실례화 시간을 가속화시킬 수 있다.
이 기능을 사용하려면 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';

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

2.모듈 바인딩 사용

이 건의는 대량의 소프트웨어 패키지를 사용하는 대형 프로젝트에서 특히 유용하다.모듈 귀속기(예를 들어 Webpack를 사용하면 tree shaking와 code splitting 등의 기능을 활성화하여 코드를 더욱 작고 빠르게 할 수 있다.
너는 일부 지역사회에서 만든 plugins와loaders도 사용할 수 있다.

3. 더 빠른 자바스크립트 방법, 특히 DOM을 사용할 때 사용

다음 코드 두 줄을 보십시오.

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

그것들은 모두 같은 일을 한다. DOM 요소를 찾아라.하지만 performance benchmark:

보시다시피 첫 번째 방법은 두 번째 방법보다 두 배 빠르다.그렇습니다. 이것은 두 번째 방법이 느리다는 것을 의미하지 않습니다. 실제 용례에서 이 두 가지 방법은 모두 매우 빠르지만, 우리가 응용 프로그램에서 비교적 느린 방법을 많이 사용할 때, 더 빠른 대체 방법으로 그것들을 바꾸면 정말 달라집니다.

4. WebAssembly(또는 네이티브 플러그인) 사용

이런 변화는 확실히 응용 프로그램을 가속화시킬 수 있지만, 그것도 많은 작업을 필요로 한다.
예를 들어, 만약 응용 프로그램이 매우 큰 숫자를 신속하게 계산하거나 대량의 데이터를 검사해야 한다면, 자바스크립트는 너무 느릴 수 있다😢
이것이 바로 WebAssembly와 native addons가 쓸모가 있을 때다!
내 전자 응용 프로그램 elcalc, 계산기 하나 봐.더 많은 고등수학을 하기 위해서 나는 아주 좋은 라이브러리math.js를 사용했다.불행하게도, 내가 고급스럽고 복잡한 계산을 테스트할 때, '평가' 단추를 누르고 결과를 표시할 때, 뚜렷한 시간 초과가 있었다.안 좋아요...
나는 수학 문제를 처리하고 이를 WASM(WebAssembly의 줄임말)으로 변환하는 데 사용되는 간단한 Rust 코드를 작성하기로 결정했다.나는 수학 표현식을 해석하고 계산하는 데 사용되는 meval 판자 상자를 사용했다.
실제 WASM을 생성하기 위해 wasm-pack를 사용했습니다. 이것은rust-webpack-template입니다.
나는 또 optimize-wasm-webpack-plugin
라는 웹 패키지 플러그인을 사용했는데 이 플러그인은 (말 그대로) 사용binaryen하여WebAssembly 파일을 최적화시켰다.
JavaScript 코드에서 WASM 함수 로드를 지연시키기 위해 권장 사항dynamic import을 사용했습니다.

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

지금 제 계산기는 수학 표현식의 계산 속도가 훨씬 빨라요.🚀

보너스만약 응용 프로그램의 크기에 관심이 있다면 다른 물건을 써라

만약 네가 응용 프로그램의 크기를 매우 마음에 두고 있다면, 대체품인 Electron Carlo 이 있다.사용자 컴퓨터에 로컬로 설치된 Google Chrome 브라우저를 사용하며, 프로그램 패키지에 Chrome을 포함하지 않습니다.
불행하게도 사용자가 Google Chrome을 설치하지 않으면 애플리케이션을 시작할 수 없고 오류가 표시됩니다.

크레디트

본문에서 열거한 몇 가지 건의는
Felix Rieseberg's 중등 문장을 "JavaScript on the Desktop, Fast and Slow"라고 부른다.나는 네가 가서 보라고 강력히 건의한다.
제 댓글을 읽어주셔서 감사합니다!나는 네가 그것이 유용하다고 느낄 수 있기를 바란다.