Load only the necessary styles and scripts

Created on 27 December 2017, over 7 years ago
Updated 14 September 2024, 8 months ago

Hello.

Today I found - all CSS is loading on the page from CDNJS. In votingapi_widgets.libraries.yml CSS's described as one library (two in fact).

I already added to my themes/custom/easydrupal/easydrupal.info.yml as temporary solution

libraries-override:
  votingapi_widgets/fontawesome:
    css:
      theme:
        https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css: false
  votingapi_widgets/fivestar:
    css:
      theme:
        https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css: false
        https://cdnjs.cloudflare.com/ajax/libs/jquery-bar-rating/1.2.1/themes/bars-square.min.css: false
        https://cdnjs.cloudflare.com/ajax/libs/jquery-bar-rating/1.2.1/themes/bars-pill.min.css: false
        https://cdnjs.cloudflare.com/ajax/libs/jquery-bar-rating/1.2.1/themes/bars-movie.min.css: false
        https://cdnjs.cloudflare.com/ajax/libs/jquery-bar-rating/1.2.1/themes/bars-horizontal.min.css: false
        https://cdnjs.cloudflare.com/ajax/libs/jquery-bar-rating/1.2.1/themes/fontawesome-stars.min.css: false
        https://cdnjs.cloudflare.com/ajax/libs/jquery-bar-rating/1.2.1/themes/fontawesome-stars-o.min.css: false
        https://cdnjs.cloudflare.com/ajax/libs/jquery-bar-rating/1.2.1/themes/bars-reversed.min.css: false
        https://cdnjs.cloudflare.com/ajax/libs/jquery-bar-rating/1.2.1/themes/bootstrap-stars.min.css: false

However, I am proposing to explode all libraries/CSS to own libraries and attach to the form only few depends on user's settings.
For example, my website already uses "CSS stars"

so I want to viev css-stars.min.css and dependies only.

I will provide a patch soon if find time for this work.

πŸ“Œ Task
Status

Needs review

Version

2.0

Component

Theming

Created by

πŸ‡ΊπŸ‡¦Ukraine ruslan piskarov Kyiv, Ukraine

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • πŸ‡ΊπŸ‡ΈUnited States tr Cascadia
  • First commit to issue fork.
  • Merge request !34#2933206 Only include the needed libraries. β†’ (Open) created by loze
  • Pipeline finished with Failed
    about 1 month ago
    Total: 183s
    #453068
  • πŸ‡ΊπŸ‡ΈUnited States loze Los Angeles

    Went through the 2 patches and created a MR to work from. it appears to be solving the issue in my initial testing.

  • Pipeline finished with Failed
    about 1 month ago
    Total: 159s
    #453093
  • Pipeline finished with Canceled
    about 1 month ago
    Total: 147s
    #453096
  • Pipeline finished with Failed
    about 1 month ago
    Total: 177s
    #453097
  • πŸ‡ΊπŸ‡ΈUnited States loze Los Angeles
  • πŸ‡ΊπŸ‡ΈUnited States loze Los Angeles

    To summarize what this does:

    1. Splits up all the barrating styles css files into their own libraries and only loads them if they are set on the widget
    2. Provides a global config page where the admin can choose to disable fontawesome or glyphicons from being included in cases when they are already including them in your theme.

  • πŸ‡ΊπŸ‡ΈUnited States tr Cascadia

    Provides a global config page where the admin can choose to disable fontawesome and glyphicons from being included for cases where you are already including them in your theme (or don't want them at all).

    Is this part really needed? If these are assets we need for votingapi_widgets, then we need to load them - there should be no choice. Likewise, I think the whole point of using libraries like this is that Drupal core takes care of removing the duplicates - you shouldn't have to be aware of what the theme or some other module is loading.

  • πŸ‡ΊπŸ‡ΈUnited States loze Los Angeles

    We could probably get away with not adding it. It was in the it the original patches to I added it to the MR.

    I know in my case, I am using a limited version of Font Awesome from their CDN that only includes a subset of the icons that I need, stars are included in this. So I don't need this module to include them. I could always remove the library in a hook, but an option here seemed convenient.

    The same could be true for glyphicons.

Production build 0.71.5 2024