search

symfony / webpack-encore

A simple but powerful API for processing & compiling assets built around Webpack
https://symfony.com/doc/current/frontend.html
MIT License
2.23k stars 197 forks source link

Adding preload to Vue Components styles, which are imported dynamically #877

Open davidnoh opened 3 years ago

davidnoh commented 3 years ago

Google Lighthouse complains that css of dynamically imported Vue components are placed without rel="preload". Is it possible to extend this via Encore Configuration? The API shows no indications to extend the MiniCssExtractPlugin configuration.

The links placed by Twig via webpack_encore.tag_renderer do have preload set.

When we use WebpackPreload for the components, every script is loaded into the DOM, regardless of whether it is needed or not.

The Vue Components are single file components with style-blocks and lang = "scss" configuration.

...{
  components: {
    'Foobar': () => import ('./ Foobar')
  }
}

If we add .disableCssExtraction() no css Files are generated at all, but we have to build at least some css files with addStyleEntry.

minimit commented 3 years ago

I thinks it's under consideration here #429

minimit commented 3 years ago

For defer just add to config/packages/webpack_encore.yaml

webpack_encore:
    script_attributes:
        defer: true

For preload would be very nice to have a functionality as defer.