Udvikling af desktopapps med Electron · Lektion

Reduktion af bundle- og diskpladsforbrug

Gør installationsprogrammet og diskforbruget for Deres Electron-app mindre ved at reducere afhængigheder, bruge ASAR og fjerne ubrugte filer som supplement til optimering af opstart og hukommelse.

Lektion 4 af 413 trin

Reduktion af bundle- og diskpladsforbrug er en gratis Udvikling af desktopapps med Electron-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Udvikling af desktopapps med Electron, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Udvikling af desktopapps med Electron-kurset indeholder 4 lektioner i alt.

Problemet med størrelsen

Electron-apps leveres med en komplet Chromium-kørselstid, så de starter store. Det, du kan kontrollere, er at holde din kode og dine aktiver slanke.

Kontrollér dine afhængigheder

Hver dependency leveres med din app. devDependencies gør ikke. Hvis et byggeværktøj placeres forkert, bliver pakken unødigt stor.

function shipsInApp(dep) {
  return dep.type === 'dependency';
}
console.log(shipsInApp({ name: 'lodash', type: 'dependency' }));

Fjern node_modules

Pakkeværktøjer kan køre npm prune --production for at fjerne udviklingspakker før pakning.

Brug ASAR-arkivering

ASAR pakker dine appfiler i ét arkiv, hvilket reducerer antallet af filer og gør læsninger hurtigere.

{
  "build": {
    "asar": true
  }
}

Udeluk unødvendige filer

Brug pakkeværktøjets files-globber til at udelukke tests, dokumentation og kildetilknytninger fra den leverede app.

function include(path) {
  return !path.includes('/test/') && !path.endsWith('.map');
}
console.log(include('src/test/spec.js'));

Tree-shake rendereren

Pak renderer-kode med et værktøj, der tree-shaker ubrugt kode, og importér kun det, du bruger.

// good: import only one function
// import { debounce } from 'lodash-es';

Foretræk lette biblioteker

Udskift tunge pakker med mindre alternativer. Et hjælperedskab til datoer kan erstatte et bibliotek på flere megabyte.

Komprimer aktiver

Optimér billeder og skrifttyper. Brug moderne formater, og begræns skrifttyper til kun de glyffer, du leverer.

Omkostninger ved native moduler

Native moduler tilføjer platformsspecifikke binærfiler. Medtag kun dem, du faktisk har brug for, så du undgår unødvendig størrelse for hver arkitektur.

Mål resultatet

Undersøg størrelsen på den udpakkede app og installationsprogrammet før og efter ændringerne for at bekræfte de reelle besparelser.

function deltaMB(before, after) {
  return (before - after).toFixed(1) + ' MB saved';
}
console.log(deltaMB(180.4, 142.1));

Differentielle opdateringer

Mindre pakker betyder også mindre deltaopdateringer, så brugerne downloader mindre ved hver udgivelse.

Hurtig kontrol

Test din viden om optimering af appens størrelse.

Opsummering

Du har lært at gøre din app mindre: kontrollere og beskære afhængigheder, aktivere ASAR, udelukke unødvendige filer, tree-shake, komprimere aktiver, tage højde for native moduler og måle besparelserne.

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser
12
Lektioner
47

Ofte stillede spørgsmål

Er lektionen “Reduktion af bundle- og diskpladsforbrug” gratis?

Ja — hele teksten til “Reduktion af bundle- og diskpladsforbrug” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Udvikling af desktopapps med Electron-kurset, skal du opgradere til CoddyKit PRO. Udvikling af desktopapps med Electron-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Reduktion af bundle- og diskpladsforbrug”?

Gør installationsprogrammet og diskforbruget for Deres Electron-app mindre ved at reducere afhængigheder, bruge ASAR og fjerne ubrugte filer som supplement til optimering af opstart og hukommelse. Du øver dig i Udvikling af desktopapps med Electron med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Udvikling af desktopapps med Electron?

Der kræves ingen tidligere erfaring. Udvikling af desktopapps med Electron på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.

Hvor lang tid tager lektionen “Reduktion af bundle- og diskpladsforbrug”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Udvikling af desktopapps med Electron-lektion?

Ja. Alle Udvikling af desktopapps med Electron-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

  1. Optimering af opstartstid
  2. Teknikker til hukommelsesstyring
  3. Ydeevneprofilering
  4. Reduktion af bundle- og diskpladsforbrug
← Tilbage til Udvikling af desktopapps med Electron