2. 적절한 시기에 모듈 불러오기

일렉트론 어플리케이션을 만드는 코드에 있어서 비용이 많이 든다면 어플리케이션이 시작 된 직후 실행 중인 모든 작업을 검사해라
작업을 즉시 중단하는것 대신에 해당 작업들을 실행되는 시점에 사용하도록 순서를 변경하는것을 고려해라

기존의 Node.js 개발자들은 require()를 맨 상단에 정의해 놓는 것에 익숙하다. 만약 현재 개발하고 있는 일렉트론
어플리케이션이 require()를 모두 상단에 올려놓는 방식이거나 바로 선언할 필요가 없는 모듈을 사용하고 있다면 적절한 시기에
필요한 모듈을 불러오는 방식으로 변경하는게 좋다

왜?

모듈을 로딩하는 것은 놀라울 정도로 비싼 작업이다 특히 윈도우에서는 사용하는 모듈의 기능이 지금 바로 필요한 상황이 아니라면 그롤 인해
사용자를 기다리게 만들어서는 안된다

이것이 명백하게 보일런지 모른다 하지만 많은 어플리케이션들은 앱이 실행된 직후에 많은 양의 작업을 하는 경향이 있다 업데이틀를 체크하거나
이후에 사용될 컨텐츠를 다운로드 하거나 대용량 디스크 I/O 같은 작업과 같은 것

우리가 흔히 사용하는 비주얼 스튜디오를 예시로
사용자가 파일을 열때 비주얼스튜디오는 즉시 그 파일을 내보인다 코드 강조 없이 텍스트와 상호작용하는 것을 우선 순위로 한다
해당 작업이 끝난 이후에 코드 강조 기능을 수행한다.

  • Visual Studii Code 에서 말하는 highlighting ( 코드강조기능)은 확인해보니 아래 이미지 처럼 흔히 함수, 조건문과 같이 우리가 흔히 사용하는 코드들에 색생을 넣어서 보기 쉽게 변경해주는 부분을 말하는 것이네요

  • 실제로 Visual Studii Code를 통해서 파일을 열어보면 최초에는 텍스트만 먼저 보여주고 이후에 코드강조 기능을 처리하네요

파일을 오픈하고 처음에는 코드강조기능이 없음 코드강조

파일을 오픈하고 난 이후에 코드강조기능이 작동함 코드강조

아래 예시를 고려해보면

어떻게?

const fs = require("fs");
const fooParser = require("foo-parser");

class Parser {
  constructor() {
    this.files = fs.readdirSync(".");
  }

  getParsedFiles() {
    return fooParser.parse(this.files);
  }
}

const parser = new Parser();

module.exports = { parser };

변경된 부분

  async getParsedFiles () {

    const fooParser = require('foo-parser')
    const files = await this.getFiles()

    return fooParser.parse(files)
  }
}
module.exports = { parser }

getParsedFiles가 필요한 시점에 foo-parser를 require() 하게 되면 필요한 시점에 리소스를 가져온다.

Notices


영어공부를 통해서 영문자료를 번역하다보니 오역도 많고 모자란 부분이 많습니다 공식문서 보시면서 확인하시는걸 추천드려요!

참조


Node 공식문서
Electron 공식문서
Electron 공식문서 성능