Tauri 2.0 Performance Optimization Fast Desktop Apps

// Cargo.toml - Optimize Rust build
[profile.release]
opt-level = "z"     # Optimize for size
lto = true          # Link-time optimization
codegen-units = 1   # Better optimization, slower builds
panic = "abort"     # Smaller binary size
strip = true        # Remove debug symbols

# Alternative: Optimize for speed
[profile.release]
opt-level = 3       # Maximum optimization
lto = "fat"         # Aggressive LTO

// Analyze bundle size
// Install: cargo install cargo-bloat
// Run: cargo bloat --release

// tauri.conf.json - Build optimization
{
  "tauri": {
    "bundle": {
      "targets": "all",
      "resources": [],  // Only include necessary resources
      "externalBin": [],
      "icon": [
        "icons/32x32.png",
        "icons/128x128.png",
        "icons/icon.icns",
        "icons/icon.ico"
      ]
    }
  },
  "build": {
    "beforeBuildCommand": "npm run build",
    "beforeDevCommand": "npm run dev",
    "devPath": "http://localhost:5173",
    "distDir": "../dist"
  }
}

// Frontend build optimization
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    target: 'esnext',
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,  // Remove console.log in production
        drop_debugger: true,
      },
    },
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          tauri: ['@tauri-apps/api'],
        },
      },
    },
    chunkSizeWarningLimit: 1000,
  },
});

// Analyze frontend bundle
// Install: npm install --save-dev rollup-plugin-visualizer
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    react(),
    visualizer({
      open: true,
      gzipSize: true,
      brotliSize: true,
    }),
  ],
});

// Dynamic imports for code splitting
import { lazy, Suspense } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

// Lazy load libraries
let pdfLib: typeof import('pdf-lib') | null = null;

async function loadPdfLib() {
  if (!pdfLib) {
    pdfLib = await import('pdf-lib');
  }
  return pdfLib;
}

// Use lightweight alternatives
// Instead of moment.js (288KB), use date-fns (12KB)
import { format, parseISO } from 'date-fns';

const formatted = format(new Date(), 'yyyy-MM-dd');

// Tree-shaking - Import only what you need
// ❌ Bad: Imports entire library
import _ from 'lodash';
const result = _.chunk(array, 2);

// ✅ Good: Imports only chunk function
import chunk from 'lodash/chunk';
const result = chunk(array, 2);

// Remove unused dependencies
// Run: npm prune
// Audit: npm ls --depth=0

// Compress assets
// Install image optimization: npm install --save-dev imagemin
import imagemin from 'imagemin';
import imageminPngquant from 'imagemin-pngquant';
import imageminJpegtran from 'imagemin-jpegtran';

await imagemin(['src/images/*.{jpg,png}'], {
  destination: 'dist/images',
  plugins: [
    imageminJpegtran(),
    imageminPngquant({
      quality: [0.6, 0.8],
    }),
  ],
});

// Efficient data structures
use std::collections::HashMap;
use std::sync::{Arc, Mutex};

// Use Arc for shared ownership without copying
pub struct AppState {
    cache: Arc<Mutex<HashMap<String, String>>>,
}

// Avoid cloning large data
// ❌ Bad: Clones entire vector
fn process_data(data: Vec<String>) -> Vec<String> {
    data.clone()
}

// ✅ Good: Uses references
fn process_data(data: &[String]) -> Vec<String> {
    data.to_vec()  // Only clone when necessary
}

// String vs &str
// ❌ Bad: Allocates String unnecessarily
fn greet(name: String) -> String {
    format!("Hello, {}!", name)
}

// ✅ Good: Uses string slice
fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

// Caching expensive operations
use once_cell::sync::Lazy;
use std::sync::Mutex;

static CACHE: Lazy<Mutex<HashMap<String, String>>> = Lazy::new(|| {
    Mutex::new(HashMap::new())
});

#[tauri::command]
fn get_cached_data(key: String) -> Result<String, String> {
    let mut cache = CACHE.lock().unwrap();
    
    if let Some(value) = cache.get(&key) {
        return Ok(value.clone());
    }
    
    // Compute expensive result
    let result = expensive_computation(&key);
    cache.insert(key, result.clone());
    
    Ok(result)
}

fn expensive_computation(key: &str) -> String {
    // Heavy computation
    format!("Computed: {}", key)
}

// Async operations for non-blocking
use tokio::fs;
use tokio::io::AsyncReadExt;

#[tauri::command]
async fn read_large_file(path: String) -> Result<Vec<u8>, String> {
    let mut file = fs::File::open(path)
        .await
        .map_err(|e| e.to_string())?;
    
    let mut contents = Vec::new();
    file.read_to_end(&mut contents)
        .await
        .map_err(|e| e.to_string())?;
    
    Ok(contents)
}

// Parallel processing with rayon
use rayon::prelude::*;

#[tauri::command]
fn process_items(items: Vec<String>) -> Vec<String> {
    items.par_iter()
        .map(|item| process_single_item(item))
        .collect()
}

fn process_single_item(item: &str) -> String {
    // CPU-intensive processing
    item.to_uppercase()
}

// Efficient iteration
// ❌ Bad: Creates intermediate vectors
let result: Vec<_> = data
    .iter()
    .map(|x| x * 2)
    .collect::<Vec<_>>()
    .iter()
    .filter(|x| *x > 10)
    .collect();

// ✅ Good: Single pass
let result: Vec<_> = data
    .iter()
    .map(|x| x * 2)
    .filter(|x| *x > 10)
    .collect();

// Memory pool for frequent allocations
use typed_arena::Arena;

fn process_with_arena() {
    let arena = Arena::new();
    
    for _ in 0..1000 {
        let data = arena.alloc(vec![1, 2, 3]);
        // Use data
    }
    // All arena allocations freed at once
}

// Streaming large responses
use tokio::io::{AsyncBufReadExt, BufReader};
use tauri::Manager;

#[tauri::command]
async fn stream_file(
    app: tauri::AppHandle,
    path: String,
) -> Result<(), String> {
    let file = fs::File::open(path)
        .await
        .map_err(|e| e.to_string())?;
    
    let reader = BufReader::new(file);
    let mut lines = reader.lines();
    
    while let Some(line) = lines.next_line()
        .await
        .map_err(|e| e.to_string())? {
        
        app.emit_all("file-line", line).ok();
    }
    
    Ok(())
}

// Avoid unnecessary allocations
// ❌ Bad
fn build_string() -> String {
    let mut s = String::new();
    for i in 0..1000 {
        s = s + &i.to_string(); // Reallocates each time
    }
    s
}

// ✅ Good
fn build_string() -> String {
    let mut s = String::with_capacity(4000); // Pre-allocate
    for i in 0..1000 {
        s.push_str(&i.to_string());
    }
    s
}

// Profile with cargo-flamegraph
// Install: cargo install flamegraph
// Run: cargo flamegraph --bin your-app

// React.memo to prevent re-renders
import React, { memo } from 'react';

interface ItemProps {
  id: number;
  name: string;
  onClick: (id: number) => void;
}

const Item = memo<ItemProps>(({ id, name, onClick }) => {
  console.log(`Rendering item ${id}`);
  return (
    <div onClick={() => onClick(id)}>
      {name}
    </div>
  );
});

// useMemo for expensive computations
import { useMemo } from 'react';

function DataProcessor({ data }: { data: number[] }) {
  const processedData = useMemo(() => {
    console.log('Processing data...');
    return data.map(x => x * 2).filter(x => x > 10);
  }, [data]); // Only recompute when data changes

  return <div>{processedData.length} items</div>;
}

// useCallback for stable function references
import { useCallback, useState } from 'react';

function Parent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback((id: number) => {
    console.log('Clicked', id);
  }, []); // Function stable across renders

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>
      <Item id={1} name="Item 1" onClick={handleClick} />
    </div>
  );
}

// Virtual scrolling for large lists
import { FixedSizeList } from 'react-window';

function LargeList({ items }: { items: string[] }) {
  const Row = ({ index, style }: any) => (
    <div style={style}>{items[index]}</div>
  );

  return (
    <FixedSizeList
      height={600}
      itemCount={items.length}
      itemSize={35}
      width="100%"
    >
      {Row}
    </FixedSizeList>
  );
}

// Debouncing expensive operations
import { useState, useEffect } from 'react';

function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => clearTimeout(handler);
  }, [value, delay]);

  return debouncedValue;
}

// Usage
function SearchComponent() {
  const [query, setQuery] = useState('');
  const debouncedQuery = useDebounce(query, 300);

  useEffect(() => {
    if (debouncedQuery) {
      // Execute search
      invoke('search', { query: debouncedQuery });
    }
  }, [debouncedQuery]);

  return (
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      placeholder="Search..."
    />
  );
}

// Lazy loading images
function LazyImage({ src, alt }: { src: string; alt: string }) {
  return (
    <img
      src={src}
      alt={alt}
      loading="lazy"
      decoding="async"
    />
  );
}

// Intersection Observer for lazy loading
import { useEffect, useRef, useState } from 'react';

function useLazyLoad() {
  const [isVisible, setIsVisible] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.disconnect();
        }
      },
      { threshold: 0.1 }
    );

    if (ref.current) {
      observer.observe(ref.current);
    }

    return () => observer.disconnect();
  }, []);

  return { ref, isVisible };
}

// Usage
function LazyComponent() {
  const { ref, isVisible } = useLazyLoad();

  return (
    <div ref={ref}>
      {isVisible ? <HeavyComponent /> : <div>Loading...</div>}
    </div>
  );
}

// Optimize re-renders with React.memo and custom comparison
const ExpensiveComponent = memo(
  ({ data }: { data: ComplexData }) => {
    return <div>{/* Render logic */}</div>;
  },
  (prevProps, nextProps) => {
    // Custom comparison - only re-render if id changes
    return prevProps.data.id === nextProps.data.id;
  }
);

// Web Workers for CPU-intensive tasks
// worker.ts
self.onmessage = (e: MessageEvent) => {
  const { data } = e;
  
  // CPU-intensive processing
  const result = processLargeDataset(data);
  
  self.postMessage(result);
};

// Component using worker
function DataProcessor() {
  const [result, setResult] = useState(null);

  useEffect(() => {
    const worker = new Worker(new URL('./worker.ts', import.meta.url));
    
    worker.onmessage = (e) => {
      setResult(e.data);
    };

    worker.postMessage(largeDataset);

    return () => worker.terminate();
  }, []);

  return <div>{result}</div>;
}