I have an issue with the setup mentioned in the title. Project is using Symfony 7.1 with Webpack encore and stimulus. I have a combination of custom.js files for individual pages and stimulus controllers. Unfortunately, all stimulus controllers are bundled into app.js and loaded on every page. Even with the /* stimulusFetch: 'lazy' */
comment.
This is a horrible thing because I have quite a few custom controllers and they are meant for individual pages, not the whole site. This increases the bundle size for no reason and some controllers are not meant for public but registered/logged in users.
How can I change this behavior and only load the controller where I need it? The current bootstrap.js is as default from Symfony:
import { startStimulusApp } from "@symfony/stimulus-bridge";
// Registers Stimulus controllers from controllers.json and in the controllers/
export const app = startStimulusApp(
require.context(
"@symfony/stimulus-bridge/lazy-controller-loader!./controllers",
true,
/.[jt]sx?$/
)
);
I tried loading bootstrap.js from another file than app.js but then none of the controllers load. I also tried not registering any controllers like so:
import { startStimulusApp } from "@symfony/stimulus-bridge";
const app = startStimulusApp();
export default app;
And then manually calling app.register('', );
in individual .js files, however it won’t load.
Please advise, much appreciated.