Comment fonctionne le plugin vite 🔍

le rôle principal du plugin est de produire un fichier entrypoints.json à partir des points d'entrée configurés dans le fichier vite.config.js.

export default defineConfig({
  plugins: [
    symfonyPlugin(),
  ],
  build: {
    manifest: true,
    rollupOptions: {
      input: {
        "app": "./assets/app.js",
        "theme": "./assets/theme.scss"
      }
    },
  },
});

Le contenu de ce fichier sera différent en fonction du contexte d'utilisation. Lorsque le serveur de développement de Vite est à l'écoute, les points d'entrée feront référence à des URL vers le serveur de Vite. Par contre à la suite d'une commande de build, les points d'entrée feront référence à des fichiers existants.

entrypoints.json (dev)

{
  "isProd": false,
  "viteServer": {
    "origin": "http://[::1]:5173",
    "base": "/build/"
  },
  "entryPoints": {
    "app": {
      "js": [
        "http://[::1]:5173/build/src/app.ts"
      ]
    },
    "theme": {
      "css": [
        "http://[::1]:5174/build/assets/theme.scss"
      ]
    }

  },
  "legacy": false
}

entrypoints.json (prod)

{
  "entryPoints": {
    "app": {
      "assets": [],
      "css": [
        "/build/assets/app-3443e464.css"
      ],
      "js": [
        "/build/assets/app-6f6529cf.js"
      ],
      "legacy": false,
      "preload": []
    },
    "theme": {
      "assets": [],
      "css": [
        "/build/assets/theme-40a4bec9.css"
      ],
      "js": [],
      "legacy": false,
      "preload": []
    }
  },
  "isProd": true,
  "legacy": false,
  "viteServer": false
}

Il existe 2 types de points d'entrée :

• Ceux qui mêlent js et css : toutes les informations sont facilement récupérables en ajoutant un callback sur generateBundle. Le point d'entrée est matérialisé par un objet de type OutputChunk. Voici comment sont récupérés les éléments.
  • assets : viteMetadata.importedAssets
  • css : viteMetadata.importedCss
  • imports : imports
  • preload : dynamicImports
• Ceux qui ne contiennent que du css et sont considérés comme css purs (voir plugin vite:css-post). Le point d'entrée n'apparaît pas dans le hook generateBundle. il est émis en tant que OutputAsset et ne possède pas de propriété facadeModuleId. Il faut donc récupérer cette correspondance chunk.facadeModuleId <-> chunk.viteMetadata.importedCss dans le hook renderChunk.