Assets Preloading and CSP

Assets preloading

This release introduces built-in support for asset preloading.

By default, Vite does code splitting, resulting in the generation of multiple small bundles that are loaded progressively as the user navigates the site. While beneficial, this can sometimes lead to a "waterfall" effect:

• We specify @vite(['resources/js/app.js']) in our Edge template.
• This file imports other files, such as our .vue or .tsx components, and sometimes CSS as well.

As a result, this will result in a waterfall of requests :

• The browser must discover and parse the .HTML.
• Discover the app.js script
• Discover the app.js script in the HTML, parse it
• Then, signals the browser to then load components/home.vue and app.css.

This process can be optimized using preload and modulepreload attributes.

In production, Vite generates a Manifest outlining the relationships between our application's various scripts and styles. Using this manifest, we can generate preload tags for assets and inject them into the HTML.

Preload tags are generated for:

• The entry points and the CSS imported by them.
• The JavaScript imported by these entry points.
• The CSS imported by the JavaScript imported by the entrypoints

This behavior will be enabled by default with the new adonisjs/vite version.

CSP Support

CSP support has been simplified compared with version 2.x.x. Now that we only have one dev server, using self as a CSP directive will be enough. However, there's an exception when using an assetUrl pointing to a CDN. We therefore retain only the keyword @viteUrl which can be used as a CSP directive, exactly as before.

Commits

• test: fix failing test b5db462
• feat: add support for preloading assets in production 5045c81
• chore: add japa snapshot plugin ba88a39
• feat: csp support 0bd9bc0
• chore: middleware typo a08281a

Full Changelog: v3.0.0-3...v3.0.0-4