Hi 👋🏻

Below is a private message on the Symfony Slack, but let's move it to a public discussion:

Hey guys, I would like to share with you what I think about the actual state of the handling of JS/CSS assets inside a Symfony app, and how, I think it can be improved.

At this point, there are two options:

1. We have Webpack Encore, with a philosophy where you have to build your JS and CSS (and other) assets. It requires Node.js, and it can be pretty heavy/slow to use every day
2. For the past few years, we have the No Build philosophy, with AssetMapper/ImportMap. It does not require Node.js (less tools to install) and it's super fast since (even if there are some hidden transformations with bundles like TailwindBundle, SassBundle, MinifyBundle, etc...).

The No Build philosophy works well, but what happens when your project becomes more serious, and you need TypeScript, Vue, Tailwind, automated tests with Vitest or anything else, a code linter and formatter, etc...?

Of coure, we have some bundles that covert those use cases, but what about tests? And how can you use TypeScript in Vue components?

To me, for some projects, it is not really efficient at all to have all those bundles trying to replicate the "JavaScript ecosystem", it would be easier and clever to use Node.js and install dedicated tools.

But the thing is, Webpack Encore tends to be... deprecated. Not really because Encore itself, but because of Webpack, which has been superseded by more modern tools like Vite, ESBuild, SWC, OXC's suit, Rolldown, RSbuild, etc... They provide by far a better DX, super easy to configure, and are super super fast!

IMO, Webpack Encore should be deprecated, in favor of a more modern solution.

We do not need to re-invent the wheel, since the DX we had with Encore is I think far better in those new tools. But instead, create a dedicated plugin and a Symfony bundle, for a given tool. This is what someone did with Vite: https://github.com/lhapaipai/vite-bundle (cc @lhapaipai)

But, I would like to have an official solution, and if possible without any hacks for the multi-entries support,

RSBuild is for me a good choice. It's super easy to configure it, to create a plugin, and handle a lot en Encore's features out of the box. For example, here the whole configuration to generate assets for a Symfony app, with 2 entries and Vue 3 + Sass support:

import { defineConfig } from '@rsbuild/core';
import { pluginVue } from '@rsbuild/plugin-vue';
import { pluginSass } from '@rsbuild/plugin-sass';

export default defineConfig({
    plugins: [pluginVue(), pluginSass()],
    source: {
        entry: {
            app: './assets/app.ts',
            page_home: './assets/pages/home.ts', 
        },
    },

    // everything below can be centralized inside a plugin (ofc, it's a POC)
    output: {
        distPath: {
            root: './public/build',
        },
        manifest: true,
    },
    server: {
        publicDir: false,
    },
    tools: {
        htmlPlugin: false,
    },
});

And with a small Symfony Bundle like WebpackEncoreBundle, we could read the manifest.json generated by RSBuild, provide some Twig functions to generate good <link> and <script> tags, etc...

tl;dr: In some Symfony apps, the AssetMapper and complementary bundles are not sufficient at all. Using Node.js with a web assets bundler, tests runner, code linter and formatter, is the best choice, but Webpack Encore starts to be deprecated in 2025.

It would be super nice to provide an official solution for the current modern and powerful bundlers like Vite, (...) Rsbuild, and an easy integration in Symfony apps.