Electron React Boilerplate (ERB) es una de las bases más robustas para construir aplicaciones de escritorio multiplataforma. Sin embargo, a medida que la lógica del negocio crece, es común notar una degradación en el tiempo de arranque. Para mitigar esto, podemos aplicar diversas técnicas de optimización que reducen el tiempo de ejecución inicial y mejoran la respuesta del sistema.

1. Refactorización de la configuración de empaquetado con Webpack

La eficiencia del bundle generado por Webpack impacta directamente en la velocidad de lectura del proceso de renderizado. Es fundamental asegurar que los activos estén minimizados y que el código se divida en fragmentos manejables.

En el archivo .erb/configs/webpack.config.renderer.prod.ts, se recomienda ajustar la lógica de optimización de la siguiente manera:

optimization: {
  minimize: true,
  minimizer: [
    new TerserJSPlugin({
      terserOptions: { compress: { drop_console: true } }
    }),
    new CssMinimizerPlugin()
  ],
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors_libs',
        chunks: 'all',
      },
    },
  },
}

Al separar las bibliotecas de terceros en un archivo independiente (vendors_libs), el motor de Chrome en Electron puede procesar el código de la aplicación de forma más ágil.

2. Ajustes de rendimiento en webPreferences

El proceso principal (Main Process) es el encargado de instanciar las ventanas. Configurar correctamente las propiedades de webPreferences en src/main/main.ts puede reducir la carga computacional innecesaria durante el inicio.

const ventanaPrincipal = new BrowserWindow({
  show: false,
  width: 1024,
  height: 728,
  webPreferences: {
    // Aislamiento para mayor seguridad y rendimiento
    contextIsolation: true,
    sandbox: true,
    // Deshabilitar throttling para evitar retardos en procesos de fondo iniciales
    backgroundThrottling: false,
    // Carga del script de pre-renderizado
    preload: app.isPackaged
      ? path.join(__dirname, 'preload.js')
      : path.join(__dirname, '../../.erb/dll/preload.js'),
  },
});

Desactivar el backgroundThrottling durante el arranque asegura que el renderizador reciba todos los recursos necesarios del CPU, incluso si la ventana no está enfocada inmediatamente.

3. Uso de ASAR y depuración de dependencias

El formato de archivo ASAR agrupa los recursos de la aplicación en un solo archivo comprimido, lo que reduce drásticamente las operaciones de lectura/escritura (I/O) en el disco duro. Asegúrese de que su configuración de electron-builder tenga esta opción habilitada:

"build": {
  "asar": true,
  "asarUnpack": [
    "**/*.node"
  ]
}

Adicionalmente, es vital auditar el archivo package.json. Muchas veces se incluyen dependencias en la sección dependencies que solo deberían estar en devDependencies, lo que aumenta el peso del paquete final innecesariamente.

4. Implementación de Carga Diferida (Lazy Loading) en React

No todos los componentes de la interfaz son necesarios en el primer segundo de ejecución. Utilizar React.lazy permite dividir el código del frontend, cargando módulos pesados solo cuando el usuario navega hacia ellos.

import React, { Suspense, lazy } from 'react';

// Carga dinámica del componente pesado
const ModuloEstadisticas = lazy(() => import('./components/StatsPanel'));

function ContenedorApp() {
  return (
    <div>
      <h1>Panel Principal</h1>
      <Suspense fallback={<p>Cargando módulo...</p>}>
        <ModuloEstadisticas />
      </Suspense>
    </div>
  );
}

Esta técnica reduce el tamaño del punto de entrada (entry point) de la aplicación, permitiendo que la interfaz básica aparecza de forma casi instantánea.

5. Optimización del entorno de desarrollo y scripts

Para mejorar la agilidad durante el ciclo de desarrollo y evitar reinicios lentos, se pueden optimizar los scripts en package.json utilizando herramientas que permitan la ejecución paralela y el monitoreo eficiente de cambios.

"scripts": {
  "dev:start": "concurrently -k \"npm run watch:main\" \"npm run watch:renderer\"",
  "watch:main": "webpack --config ./.erb/configs/webpack.config.main.dev.ts --watch",
  "watch:renderer": "webpack serve --config ./.erb/configs/webpack.config.renderer.dev.ts"
}

El uso de concurrently ayuda a gestionar los flujos de salida de Webpack para el proceso principal y el de renderizado simultánaemente, reduciendo los tiempos de espera entre cambios de código.