Ir al contenido

Compartir dependencias

wu dev comparte dependencias por identidad de URL: todas las apps importan /@modules/react del mismo origen, así que el navegador evalúa un solo módulo. wu build lleva esa propiedad a producción.

Sin ella, cada app se empaqueta su copia. Un shell React con dos micro-apps React son tres Reacts descargados.

wu.config.json
{
"shared": ["react", "react-dom", "react-dom/client"]
}

Cada especificador listado se empaqueta una vez en dist/wu-shared/<pkg>-<hash>.js, se marca como external en el build de cada app, y el shell recibe un import map que lo resuelve a esa URL.

Los subpaths son especificadores distintos: compartir react-dom no comparte react-dom/client. Lista cada uno que importes.

Medido en un proyecto real — shell React más dos micro-apps React:

Antes Después
dist/ completo 807 KB 425 KB
Cada micro-app 207 KB 12 KB
Descargas de React 3 1

La función degrada en vez de romper, y avisa siempre:

Situación Qué pasa
La app no tiene vite.config.* Conserva su copia privada
Su build_cmd no es un vite build directo Conserva su copia privada
Un especificador no resuelve Ese no se comparte; los demás sí
El bundle compartido falla Todas conservan su copia

En el peor caso el resultado es el comportamiento anterior a la función. Nunca un build roto. Pero se dice por consola: un fallback silencioso se parece demasiado a que todo fue bien.

Los nombres que exporta un paquete CommonJS no se saben leyendo el código. export * from un módulo CJS re-exporta únicamente default, y un bundle así deja import { useState } from 'react' valiendo undefined — con el build en verde y el import map correcto.

wu resuelve esto cargando el módulo en Node y enumerando sus exports antes de generar el shim, que es lo mismo que hace el optimizador de dependencias de Vite.

Es exactamente la clase de fallo que solo aparece al renderizar la página.

Compartir dependencias es una parte; el build además deja dist/ listo para publicarse tal cual:

  • dist/mf-<app>/wu.json por cada micro-app, con el entry exacto del bundle hasheado (assets/index-CApRPu2b.js). Es el manifiesto que el framework busca al montar — no hace falta escribirlo a mano, y su prefijo assets/ evita el sondeo de rutas que rompe en hosting estático.
  • dist/apps.json: el catálogo de apps como dato aparte, para poder cambiar URLs por entorno (staging, producción) sin reconstruir.
  • dist/wu-manifest.json: el resumen de todo lo construido.
  • Shell propio respetado. Si tu shell/ tiene su código, el build lo compila con su propia configuración y le inyecta window.__wu_apps con las apps construidas — incluidos los <link> de CSS que Vite separa por app. El comando sale de shell.build_cmd en wu.config.json; por defecto es npx vite build, y los shells Astro y Next.js usan el suyo (npx astro build / npx next build).
  • Cabeceras de seguridad para tu host: dist/_headers (Netlify, Cloudflare Pages), dist/vercel.json (con el rewrite SPA) y dist/wu-security.conf (nginx). Incluyen una CSP calculada del propio index.html final — cada bloque en línea va hasheado como 'sha256-…', sin 'unsafe-inline' ni 'unsafe-eval'.
  • Auditoría de lo que va a salir. El build recorre dist/ y avisa si algo que parece una credencial, un lockfile o un .git/ está a punto de publicarse.