Performances 🚀

Préchargement de vos scripts ⏳

Lorsque vos fichiers contiennent des dépendances communes (React, Vue, ...), Vite va découper vos fichiers de manière à réduire la taille globale de vos scripts.

Le bundle vous permet de choisir la manière dont vous allez précharger vos scripts avec l'option preload.

# config/packages/pentatrion_vite.yaml
pentatrion_vite:
    preload: link-header

avec une configuration comme celle-ci par exemple:

// vite.config.js
import symfonyPlugin from 'vite-plugin-symfony';
import vuePlugin from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [
    vuePlugin(),
    symfonyPlugin(),
  ],

  build: {
    rollupOptions: {
      input: {
        "app": "./assets/app.js",
      },
      output: {
        manualChunks: {
          vue: ['vue']
        }
      }
    },

  },
});

// assets/app.js
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

{{ vite_entry_link_tags('app') }}
{{ vite_entry_script_tags('app') }}

L'option preload n'est effective que lorsque vous avec lancé un vite build.

Voici comment se comportera votre application en fonction de l'option preload que vous aurez choisie.

Avec l'option none :

<link rel="stylesheet" href="/build/assets/app-05a88f8a.css" crossorigin>
<script type="module" src="/build/assets/app-1b490458.js" crossorigin></script>

Avec l'option link-tag (comportement par défaut):

Vos dépendances JS sont préchargées au moment du traitement de la page html.

<link rel="stylesheet" href="/build/assets/app-05a88f8a.css" crossorigin>
<link rel="modulepreload" href="/build/assets/vue-1efeee8e.js" crossorigin>
<script type="module" src="/build/assets/app-1b490458.js" crossorigin></script>

Avec l'option link-header :

Tous vos fichiers sont préchargés avant le traitement de la page html. Nécessite d'intaller le composant Symfony symfony/web-link.

/* En-tête HTTP ajoutée par le composant Symfony Web-Link */
Link: \
  </build/assets/vue-1efeee8e.js>; rel="modulepreload"; crossorigin, \
  </build/assets/app-1b490458.js>; rel="modulepreload"; crossorigin, \
  </build/assets/app-05a88f8a.css>; rel="preload"; as="style" crossorigin

<link rel="stylesheet" href="/build/assets/app-05a88f8a.css">
<script type="module" src="/build/assets/app-1b490458.js"></script>

Paramétrage encore plus fin :

Si vous souhaitez choisir encore plus finement quels fichiers seront préchargés et ceux qui ne le seront pas, il vous faudra écouter l'événement Pentatrion\ViteBundle\Event\RenderAssetTagEvent voir section attributs personnalisés.

Mise en cache des fichiers de configuration 🏃

Lorsque vous appelez les fonctions Twig vite_entry_link_tags('app') ou vite_entry_script_tags('app') ou asset('assets/image.jpg'), le bundle va chercher des fichiers public/build/entrypoints.json et manifest.json pour remplir vos balises html avec les bons attributs src ou href.

Si vous avez spécifié des configurations multiples, ce sera d'autant plus de fichiers qui seront ouverts et traités.

Lorsque votre application est en production vous pouvez choisir de regrouper ces fichiers json en un seul fichier de cache php.

# config/packages/pentatrion_vite.yaml
when@prod:
    pentatrion_vite:
        cache: true

# construits vos fichiers js
# et génère également `public/build/entrypoints.json` et `public/build/manifest.json`
npm run build

# vide le cache et effectue un warm-up
# important cette étape doit avoir lieu après le `npm run build`
symfony console cache:clear

L'étape de warm-up permet la création d'un seul fichier PHP qui sera utilisé à la place de vos fichiers *.json.

// var/cache/prod/pentatrion_vite.cache.php
// This file has been auto-generated by the Symfony Cache Component.
return [
  [
    '_default.entrypoints' => 0,
    '_default.manifest' => 1,
  ],
  [
    0 => [
        'base' => '/build/',
        'entryPoints' => [
            'app' => ...,
        ],
        'legacy' => false,
        'metadatas' => [],
        'version' => '5.0.0',
        'viteServer' => null,
    ],
    1 => [
        'assets/app.js' => ...,
    ],
  ]
];