Controladores de Stimulus perezosos

With a Subscription, click any sentence in the script to jump to that part of the video!

Esto se está liando: déjame cerrar unos cuantos archivos... y luego abrirassets/controllers/goodbye-controller.js. Imagina, por un momento, que este controlador es enorme. O, más probablemente, que importa un gran paquete de terceros como d3 para gráficos. Pero, sólo vamos a utilizar este controlador en algunas páginas.

Esto es lo que pasa. Para registrar tus controladores con Stimulus, todos estos archivos se descargan inmediatamente. Así que se carga la página, se inicia Stimulus, se descargan todos estos archivos y también se descargan todos los archivos que importan. Eso suele estar bien, pero si estás importando algo grande, puede ser un desperdicio.

Para solucionarlo, encima de la clase, puedes añadir una sintaxis muy especial:/* stimulusFetch: 'lazy' */.

            
            9 lines
            
            assets/controllers/goodbye_controller.js
        
                                                    ... lines 1 - 2
                            
            /* stimulusFetch: 'lazy' */
        
            export default class extends Controller {
        
                                                    ... lines 5 - 7
                            
            }

Esto funciona gracias a StimulusBundle. Cuando detecta esto, le dice a Stimulus que se contenga y no descargue este archivo JavaScript ni nada de lo que importe hasta que haya un elemento que coincida con esto en la página.

Observa. Antes de hacer ese cambio, si buscábamos "adiós", se cargaba ese controlador, aunque no se utilizara en esta página. Pero ahora, actualiza y busca "adiós". ¡No está ahí! Inspecciona el elementodata-controller="hello". Cámbialo por goodbye y... ¡boom! Funciona! Puedes ver que se ha activado (eso es lo que hace nuestro Goodbye controller! ), y si miramos en la pestaña Red, ahora se ha descargado. Me encanta esta función.

Esto también se puede hacer para paquetes de terceros. Si miras enassets/controllers.json... Turbo no es un buen ejemplo de esto, pero si dijéramos "fetch": "lazy" en cualquiera de ellos, tendrían el mismo comportamiento que acabamos de ver.

            
            16 lines
            
            assets/controllers.json
        
            {
        
                "controllers": {
        
                    "@symfony/ux-turbo": {
        
                        "turbo-core": {
        
                            "enabled": true,
        
                            "fetch": "eager"
        
                        },
        
                                                    ... lines 8 - 11
                            
                    }
        
                },
        
                                                    ... line 14
                            
            }

¡Ya está! ¡El capítulo más fácil! Utilízalo para aligerar tu página inicial si tienes algunos controladores Stimulus pesados que sólo se utilizan en determinadas páginas.

Siguiente: a veces, suspiro profundo, los dioses de la tecnología nos fruncen el ceño y las cosas no funcionan. Aprendamos algunos trucos para ayudar a depurar cuando eso ocurra.

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=8.1",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "babdev/pagerfanta-bundle": "^4.0", // v4.2.0
        "doctrine/doctrine-bundle": "^2.7", // 2.10.0
        "doctrine/doctrine-migrations-bundle": "^3.2", // 3.2.4
        "doctrine/orm": "^2.12", // 2.15.2
        "knplabs/knp-time-bundle": "^1.18", // v1.20.0
        "pagerfanta/doctrine-orm-adapter": "^4.0", // v4.1.0
        "pagerfanta/twig": "^4.0", // v4.1.0
        "stof/doctrine-extensions-bundle": "^1.7", // v1.7.1
        "symfony/asset": "6.3.*", // v6.3.0
        "symfony/asset-mapper": "6.3.*", // v6.3.0
        "symfony/console": "6.3.*", // v6.3.0
        "symfony/dotenv": "6.3.*", // v6.3.0
        "symfony/flex": "^2", // v2.3.1
        "symfony/framework-bundle": "6.3.*", // v6.3.0
        "symfony/http-client": "6.3.*", // v6.3.0
        "symfony/monolog-bundle": "^3.0", // v3.8.0
        "symfony/proxy-manager-bridge": "6.3.*", // v6.3.0
        "symfony/runtime": "6.3.*", // v6.3.0
        "symfony/stimulus-bundle": "^2.9", // v2.9.1
        "symfony/twig-bundle": "6.3.*", // v6.3.0
        "symfony/ux-turbo": "^2.9", // v2.9.1
        "symfony/web-link": "6.3.*", // v6.3.0
        "symfony/yaml": "6.3.*", // v6.3.0
        "twig/extra-bundle": "^2.12|^3.0", // v3.6.1
        "twig/twig": "^2.12|^3.0" // v3.6.1
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.4", // 3.4.4
        "symfony/debug-bundle": "6.3.*", // v6.3.0
        "symfony/maker-bundle": "^1.41", // v1.49.0
        "symfony/stopwatch": "6.3.*", // v6.3.0
        "symfony/web-profiler-bundle": "6.3.*", // v6.3.0
        "zenstruck/foundry": "^1.21" // v1.33.0
    }
}

Edit on GitHub

TRACK

Symfony 6 >

COURSE

AssetMapper: JS Moderno sin Sistema de Compilación

Controladores de Stimulus perezosos

Keep on Learning!

Leave a comment!

What PHP libraries does this tutorial use?

	... lines 1 - 2
	/* stimulusFetch: 'lazy' */
	export default class extends Controller {
	... lines 5 - 7
	}

	{
	"controllers": {
	"@symfony/ux-turbo": {
	"turbo-core": {
	"enabled": true,
	"fetch": "eager"
	},
	... lines 8 - 11
	}
	},
	... line 14
	}