실행속도 개선
포터블로 빌드된 일렉트론 애플리케이션의 실행 속도를 올리기 위해 다양한 최적화 방법을 적용할 수 있습니다. 여기 몇 가지 주요 방법을 설명드립니다.
1. 애플리케이션 크기 줄이기
애플리케이션 크기를 줄이면 로딩 시간이 단축될 수 있습니다. 불필요한 파일을 제거하고 필요한 파일만 포함되도록 설정합니다.
Webpack 사용
Webpack을 사용하여 애플리케이션을 번들링하고 압축하면 로딩 속도를 개선할 수 있습니다.
npm install --save-dev webpack webpack-cliwebpack.config.js 파일을 생성하고 구성합니다:
const path = require('path');
module.exports = {
mode: 'production',
entry: './src/main.js', // 주 진입점 파일
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
target: 'electron-main',
node: {
__dirname: false,
__filename: false
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
};이렇게 설정한 후 npm run build 명령어로 번들링할 수 있습니다.
Electron Builder 설정
Electron Builder 설정에서 불필요한 파일을 제외하도록 설정할 수 있습니다. package.json 파일에 설정을 추가합니다:
{
"build": {
"files": [
"dist/**/*",
"node_modules/**/*",
"package.json"
],
"extraFiles": [
"resources/**/*"
],
"asar": true
}
}2. ASAR 아카이브 사용
ASAR 아카이브를 사용하면 애플리케이션 파일을 하나의 아카이브 파일로 묶어 빠르게 로드할 수 있습니다. package.json 파일의 build 설정에 asar: true를 추가합니다.
3. 시작 시간 최적화
애플리케이션 시작 시간 최적화를 위해 코드 레벨에서 할 수 있는 최적화 방법들입니다.
지연 로딩
필요하지 않은 모듈은 애플리케이션 시작 후에 로딩되도록 지연 로딩을 설정합니다.
const { app, BrowserWindow } = require('electron');
let mainWindow;
function createWindow () {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
mainWindow.loadFile('index.html');
mainWindow.on('closed', function () {
mainWindow = null
});
}
app.on('ready', () => {
createWindow();
// 지연 로딩 모듈
setTimeout(() => {
const someHeavyModule = require('some-heavy-module');
// Use the module
}, 1000);
});필요 없는 모듈 제거
애플리케이션 시작 시 필요하지 않은 모듈을 확인하고 제거합니다. 패키지 크기를 줄이고 로딩 시간을 개선할 수 있습니다.
4. 파일 압축 및 이미지 최적화
이미지 파일과 기타 리소스를 압축하여 애플리케이션 크기를 줄일 수 있습니다. 이를 위해 이미지 압축 도구를 사용합니다.
5. 파일 시스템 접근 최소화
애플리케이션이 파일 시스템에 접근하는 빈도를 최소화하면 성능을 개선할 수 있습니다. 필요한 데이터는 메모리에 로드하여 사용합니다.
6. 하드웨어 가속 사용
Electron에서 하드웨어 가속을 사용하도록 설정하여 성능을 향상시킬 수 있습니다. 기본적으로 활성화되어 있지만, 비활성화된 경우 명시적으로 설정할 수 있습니다.
const { app } = require('electron');
app.commandLine.appendSwitch('enable-gpu-rasterization');
app.commandLine.appendSwitch('enable-zero-copy');
// 기타 하드웨어 가속 옵션 추가
7. 업데이트 및 최적화된 라이브러리 사용
최신 버전의 Electron과 관련 라이브러리를 사용하면 성능 개선이 포함된 업데이트를 활용할 수 있습니다. 프로젝트의 모든 종속성을 최신 버전으로 유지합니다.
npm update
Buy me a coffee