GemShell

Appearance

Optimization ​

Reduce build size and improve performance.

PRO FEATURE

Advanced optimization features require GemShell Pro.

Minification ​

JavaScript Minification ​

Compresses JavaScript files by:

  • Removing whitespace and comments
  • Shortening variable names
  • Dead code elimination

Typical reduction: 30-60%

CSS Minification ​

Compresses CSS files by:

  • Removing whitespace and comments
  • Shortening color codes
  • Merging rules

Typical reduction: 20-40%

HTML Minification ​

Compresses HTML files by:

  • Removing whitespace
  • Removing comments
  • Shortening attributes

Typical reduction: 10-20%

Remove Unused Assets ​

Automatically scans your game files and removes:

Junk Files (always removed):

  • System files: .DS_Store, Thumbs.db, desktop.ini
  • Source maps: *.map
  • Design files: *.psd, *.ai, *.sketch, *.fig
  • Dev configs: package.json, tsconfig.json, .eslintrc
  • Temp files: *.log, *.bak, *.tmp

Unreferenced Media (when enabled):

  • Images: .png, .jpg, .gif, .webp, .svg
  • Audio: .mp3, .wav, .ogg, .flac
  • Video: .mp4, .webm
  • Fonts: .ttf, .woff, .woff2

How It Works ​

  1. Collects all text files (HTML, JS, CSS, JSON, etc.)
  2. Scans for asset references by filename
  3. Removes media files not referenced anywhere

This is safe because:

  • Only removes media files, never code
  • Root-level files are always kept
  • Checks both filename and name without extension

Bundle CDN Resources ​

Downloads external resources and bundles them locally:

html
<!-- Before -->
<script src="https://cdn.example.com/library.js"></script>

<!-- After (bundled locally) -->
<script src="lib/library.js"></script>

Benefits:

  • Faster loading (no network requests)
  • Works offline
  • No CDN dependency

Image Optimization ​

GemShell does not modify images by default. Use plugins for:

  • PNG compression
  • JPEG optimization
  • WebP conversion

Asset Exclusion ​

Exclude files from builds in gemshell.config.json:

json
{
  "excludeFiles": [
    "*.psd",
    "*.ai",
    "src/**/*.ts",
    "node_modules/**",
    "*.map"
  ]
}

Build Size Tips ​

1. Enable "Remove Unused Assets" ​

Enable this option in Game Settings → Optimization to automatically:

  • Remove junk files (.DS_Store, source maps, etc.)
  • Remove unreferenced images, audio, and video files

2. Compress Audio ​

  • Use MP3/OGG instead of WAV
  • Reduce bitrate where quality allows
  • Use mono for non-spatial sounds

3. Optimize Images ​

  • Use appropriate formats (PNG for UI, JPEG for photos)
  • Reduce resolution where possible
  • Use sprite sheets

4. Bundle JavaScript ​

Consider bundling your JS before GemShell:

bash
# Using esbuild
esbuild src/main.js --bundle --minify --outfile=dist/game.js

5. Remove Source Maps ​

Exclude .map files from production builds.

Electron Size ​

The Electron runtime adds ~150-200MB per platform. This is unavoidable but:

  • Users only download once
  • Modern storage makes this acceptable
  • Steam/itch.io handle compression

Measuring Build Size ​

Check your build sizes:

bash
# macOS
du -sh ~/GemShell-Builds/GameTitle-1.0.0/macos-arm64/

# All platforms
du -sh ~/GemShell-Builds/GameTitle-1.0.0/*/

Performance Tips ​

1. Use requestAnimationFrame ​

javascript
function gameLoop() {
  update();
  render();
  requestAnimationFrame(gameLoop);
}

2. Avoid Layout Thrashing ​

javascript
// Bad
elements.forEach(el => {
  el.style.width = el.offsetWidth + 10 + 'px';
});

// Good
const widths = elements.map(el => el.offsetWidth);
elements.forEach((el, i) => {
  el.style.width = widths[i] + 10 + 'px';
});

3. Use Hardware Acceleration ​

css
.animated {
  transform: translateZ(0);
  will-change: transform;
}

4. Lazy Load Assets ​

Load assets only when needed:

javascript
async function loadLevel(id) {
  const data = await fetch(`levels/${id}.json`);
  // ...
}