fix: orden de carga garantizado y dependencias React movidas correctamente
PROBLEMA CRÍTICO: - Error useLayoutEffect en vendor-utils - Orden de carga no garantizado (chunks se cargan en paralelo) - @ungap/structured-clone en vendor-utils pero usado por React SOLUCIÓN: 1. Prefijos numéricos en chunkFileNames: - 0-vendor-react (carga PRIMERO - orden alfabético) - 1-vendor-utils (carga DESPUÉS) - 2-vendor-markdown (carga después) 2. @ungap/structured-clone movido a vendor-react (puede ser usado por librerías React) 3. Dependencias sin clasificar en producción: - Van a vendor-react por seguridad - Previene errores useLayoutEffect RESULTADO: ✅ Orden de carga garantizado (alfabético con prefijos) ✅ vendor-react siempre carga antes que vendor-utils ✅ Todas las dependencias React en vendor-react ✅ Sin errores useLayoutEffect
This commit is contained in:
parent
9361dabc3d
commit
3e766d4ee6
|
|
@ -58,20 +58,22 @@ export default defineConfig({
|
||||||
rollupOptions: {
|
rollupOptions: {
|
||||||
// Code splitting: dividir el bundle en chunks más pequeños
|
// Code splitting: dividir el bundle en chunks más pequeños
|
||||||
output: {
|
output: {
|
||||||
// CRÍTICO: Asegurar que vendor-react se carga PRIMERO
|
// CRÍTICO: Asegurar orden de carga correcto usando prefijos numéricos
|
||||||
// Esto garantiza que React está disponible antes que cualquier otro código
|
// El navegador carga los scripts en orden alfabético, así que usamos números
|
||||||
entryFileNames: (chunkInfo) => {
|
entryFileNames: 'assets/[name]-[hash].js',
|
||||||
// El entry principal debe cargarse primero
|
|
||||||
if (chunkInfo.name === 'index') {
|
|
||||||
return 'assets/[name]-[hash].js';
|
|
||||||
}
|
|
||||||
return 'assets/[name]-[hash].js';
|
|
||||||
},
|
|
||||||
// Ordenar chunks para que vendor-react se cargue primero
|
|
||||||
chunkFileNames: (chunkInfo) => {
|
chunkFileNames: (chunkInfo) => {
|
||||||
// vendor-react debe tener prioridad en el nombre para cargarse primero
|
// CRÍTICO: Numerar chunks para garantizar orden de carga alfabético
|
||||||
|
// 0 = vendor-react (debe cargarse PRIMERO - orden alfabético)
|
||||||
|
// 1 = vendor-utils (carga DESPUÉS de vendor-react)
|
||||||
|
// 2 = vendor-markdown (carga después)
|
||||||
if (chunkInfo.name === 'vendor-react') {
|
if (chunkInfo.name === 'vendor-react') {
|
||||||
return 'assets/vendor-react-[hash].js';
|
return 'assets/0-vendor-react-[hash].js';
|
||||||
|
}
|
||||||
|
if (chunkInfo.name === 'vendor-utils') {
|
||||||
|
return 'assets/1-vendor-utils-[hash].js';
|
||||||
|
}
|
||||||
|
if (chunkInfo.name === 'vendor-markdown') {
|
||||||
|
return 'assets/2-vendor-markdown-[hash].js';
|
||||||
}
|
}
|
||||||
return 'assets/[name]-[hash].js';
|
return 'assets/[name]-[hash].js';
|
||||||
},
|
},
|
||||||
|
|
@ -160,7 +162,6 @@ export default defineConfig({
|
||||||
id.includes('hast-util-parse-selector') ||
|
id.includes('hast-util-parse-selector') ||
|
||||||
id.includes('detect-node-es') ||
|
id.includes('detect-node-es') ||
|
||||||
id.includes('get-nonce') ||
|
id.includes('get-nonce') ||
|
||||||
id.includes('@ungap/structured-clone') ||
|
|
||||||
id.includes('devlop') ||
|
id.includes('devlop') ||
|
||||||
id.includes('fault') ||
|
id.includes('fault') ||
|
||||||
id.includes('hast-util-from-parse5') ||
|
id.includes('hast-util-from-parse5') ||
|
||||||
|
|
@ -170,6 +171,11 @@ export default defineConfig({
|
||||||
) {
|
) {
|
||||||
return 'vendor-utils';
|
return 'vendor-utils';
|
||||||
}
|
}
|
||||||
|
// CRÍTICO: @ungap/structured-clone puede ser usado por librerías React
|
||||||
|
// Moverlo a vendor-react para asegurar que React está disponible
|
||||||
|
if (id.includes('@ungap/structured-clone')) {
|
||||||
|
return 'vendor-react';
|
||||||
|
}
|
||||||
// CRÍTICO: Si llegamos aquí, algo se nos escapó
|
// CRÍTICO: Si llegamos aquí, algo se nos escapó
|
||||||
// Por seguridad, mover TODO a vendor-utils en lugar de vendor-other
|
// Por seguridad, mover TODO a vendor-utils en lugar de vendor-other
|
||||||
// Esto previene que cualquier código desconocido use React antes de tiempo
|
// Esto previene que cualquier código desconocido use React antes de tiempo
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue