Лекция
Js Electron это framework для создания кроссплатформенных настольных приложений с использованием JavaScript, HTML и CSS.
но часто после сборки прокта размер его становиться больше иходного, рассмотрим какие пусти и спосбы уменьшения его ращмера.
Чтобы уменьшить размер проекта JavaScript Electron, нужно уменьшать не исходники, а итоговую сборку: dist, .exe, .AppImage, .dmg, .deb и т.д.
Частая проблема: в билд попадают лишние папки:
node_modules src tests docs .git screenshots coverage .env
В electron-builder нужно явно указать files.
Пример package.json:
{
"build": {
"files": [
"dist/**/*",
"main.js",
"package.json"
],
"extraResources": [
"assets/**/*"
]
}
}
Таким образом, в приложение класть только нужные файлы.
{
"build": {
"files": [
"dist/**/*",
"main.js",
"package.json",
"!**/*.map",
"!**/*.md",
"!**/test/**",
"!**/tests/**",
"!**/__tests__/**",
"!**/.git/**",
"!**/coverage/**",
"!**/screenshots/**"
]
}
}
Особенно часто много весят:
*.map docs examples tests screenshots large images
Перед сборкой:
npm install --omit=dev
Или проверь, что большие библиотеки не лежат в dependencies, если они нужны только для разработки.
Например, это должно быть в devDependencies:
{
"devDependencies": {
"vite": "...",
"webpack": "...",
"eslint": "...",
"typescript": "...",
"electron": "..."
}
}
А не в dependencies.
Важно: сам electron обычно не должен попадать внутрь dependencies приложения как runtime-библиотека.
Не клади весь src в Electron-приложение.
Правильно:
src/ ← исходники dist/ ← минифицированный frontend main.js ← main process
Сборка:
npm run build electron-builder
Например:
{
"scripts": {
"build": "vite build",
"dist": "npm run build && electron-builder"
}
}
Source map-файлы часто большие:
app.js.map vendor.js.map
В Vite:
export default {
build: {
sourcemap: false
}
}
В Webpack:
module.exports = {
devtool: false
}
Команда:
du -sh node_modules/*
Или удобнее:
npx cost-of-modules
Большие зависимости можно заменить.
Например:
moment.js → dayjs lodash целиком → lodash-es или отдельные функции axios → fetch
Плохо:
import _ from 'lodash';
Лучше:
import debounce from 'lodash/debounce';
Для electron-builder:
{
"build": {
"asar": true
}
}
Это не всегда радикально уменьшает размер, но делает приложение компактнее и аккуратнее.
Если внутри есть:
video large images 3D models PDF audio
варианты:
сжать загружать с сервера выносить в отдельный пакет использовать lazy loading
Изображения можно сжать:
npx imagemin assets/* --out-dir=assets-optimized
Если тебе нужен только x64:
electron-builder --win --x64
А не сразу:
--x64 --ia32 --arm64
В package.json:
{
"build": {
"win": {
"target": "nsis"
}
}
}
После сборки смотри:
dist/win-unpacked dist/linux-unpacked dist/mac
И проверь размер:
du -sh dist/* du -sh dist/win-unpacked/*
Так можно быстро понять, что именно раздувает приложение.
{
"main": "main.js",
"scripts": {
"build": "vite build",
"dist": "npm run build && electron-builder"
},
"build": {
"asar": true,
"files": [
"dist/**/*",
"main.js",
"preload.js",
"package.json",
"!**/*.map",
"!**/*.md",
"!**/test/**",
"!**/tests/**",
"!**/__tests__/**",
"!**/coverage/**"
],
"directories": {
"output": "release"
}
}
}
Обычно размер Electron-проекта уменьшают так:
1. Собрать frontend в dist
2. В files указать только dist, main.js, preload.js, package.json
3. Исключить tests, docs, source maps
4. Перенести dev-пакеты в devDependencies
5. Проверить тяжелые node_modules
6. Включить asar
Сам Electron все равно весит довольно много, поэтому даже пустое приложение может быть десятки мегабайт. Но лишние файлы и зависимости часто добавляют еще сотни мегабайт.
Комментарии