Performances 🚀

Preloading your scripts ⏳

When your files contain common dependencies (React, Vue, etc.), Vite will split your files in order to reduce the overall size of your scripts.

The bundle allows you to choose how you will preload your scripts with the preload option.

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

With a configuration like this for example:

// 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') }}

The preload option is only effective when you have launched a vite build.

This is how your application will behave depending on the preload option you choose.

With the none option:

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

With the link-tag option (default behavior):

Your JS dependencies are preloaded when the html page is processed.

<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>

With the link-header option:

All your files are preloaded before processing the html page. Requires installing the Symfony component symfony/web-link.

/* HTTP header added by the Symfony Web-Link component */
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>

Even finer settings:

If you want to choose even finer which files will be preloaded and which ones will not, you will need to listen to the event Pentatrion\ViteBundle\Event\RenderAssetTagEvent see section custom attributes.

Caching configuration files 🏃

When you call the Twig functions vite_entry_link_tags('app') or vite_entry_script_tags('app') or asset('assets/image.jpg'), the bundle will look for public/build/entrypoints files. json and manifest.json to fill your html tags with the correct src or href attributes.

If you have specified multiple configurations, even more files will be opened and processed.

When your application is in production you can choose to group these json files into a single php cache file.

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

# build your js files
# and also generates `public/build/entrypoints.json` and `public/build/manifest.json`
npm run build

# clear the cache and perform a warm-up
# important this step must take place after the `npm run build`
symfony console cache:clear

The warm-up step allows the creation of a single PHP file which will be used in place of your *.json files.

// 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' => ...,
    ],
  ]
];