Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-132258

Create a migration strategy to slim down frontend-css-web

    Details

    • Type: Spike
    • Status: Closed
    • Priority: Minor
    • Resolution: Completed
    • Affects Version/s: None
    • Fix Version/s: None
    • Labels:
      None
    • Conclusion:
      Hide
      We created a consistent procedure to determine what to do with each constituent of frontend-css-web. The total performance improvement is yet to be determined as there's no straightforward estimation. This is due to the fact that after some initial analysis, the determination of where a given file/style is being used has to be made for each style individually and requires some time. As a result, part of the slim process will be concerned with the decision of what to do with each affected style.

      Due to the above, we'll set up checkpoints during the task to assess the decisions made and the current performance savings in comparison with the baseline case.
      Show
      We created a consistent procedure to determine what to do with each constituent of frontend-css-web. The total performance improvement is yet to be determined as there's no straightforward estimation. This is due to the fact that after some initial analysis, the determination of where a given file/style is being used has to be made for each style individually and requires some time. As a result, part of the slim process will be concerned with the decision of what to do with each affected style. Due to the above, we'll set up checkpoints during the task to assess the decisions made and the current performance savings in comparison with the baseline case.
    • Sprint:
      S04E16 - Hard to Earn, S04E17 - Those Who Tell the...

      Description

      After LPS-130914 research, we'd like to explore how to move styles out of frontend-css-web module to the components which make use of them.

      The goal of this spike is to:

      • Determine which modules utilize each .scss file
      • Find 2 or 3 of them which are widely used in the target scenario
      • Move them to the corresponding component using it. This way, only when component is present in the page, the corresponding styles will be served. Additional considerations:
        • Deduplication in case the same component occurs several times
        • Inlining vs referencing a .css file
      • Measure the results in terms of:
        • Number of http requests needed to serve the styles
        • Overall size of the served css

      Target scenario: a content page being visited by guest user

      Acceptance criteria:

      • A research document describing the steps above
      • A PoC in the form of a PR which can be properly tested

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              daniel.sanz Daniel Sanz
              Reporter:
              daniel.sanz Daniel Sanz
              Engineering Assignee:
              Eduardo Allegrini
              Votes:
              0 Vote for this issue
              Watchers:
              0 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:

                  Packages

                  Version Package