Skip to content

Conversation

sean-perkins
Copy link
Contributor

@sean-perkins sean-perkins commented Apr 4, 2024

Issue number: N/A


What is the current behavior?

Ionic Framework developers make extensive use of multi-line comments in the Sass files. However these comments are not stripped from the generated output.

This leads to a significant increase to the file size of CSS and can have an impact on runtime performance.

For example: https://cdn.jsdelivr.net/npm/@ionic/core/css/core.css has 183 lines of comment blocks before a single line of CSS.

What is the new behavior?

  • Compresses the generated output from Sass → CSS to strip out multi-line comment blocks.
  • Developers can use loud comments if they want to include comments in the generated output.
  • In the case of just the core.css file, the file size goes from 20kb to 10kb.
    • The entire CSS global styles goes from 758 KB to 606kb.

Does this introduce a breaking change?

  • Yes
  • No

Other information

Dev-build: 7.8.4-dev.11712251308.1da8aede

@github-actions github-actions bot added the package: core @ionic/core package label Apr 4, 2024
@sean-perkins sean-perkins marked this pull request as ready for review April 4, 2024 17:55
@sean-perkins sean-perkins requested a review from a team as a code owner April 4, 2024 17:55
@sean-perkins sean-perkins requested review from liamdebeasi and removed request for a team April 4, 2024 17:55
Copy link
Contributor

@liamdebeasi liamdebeasi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for doing this! We might want to make this a perf since this will reduce the bundle size for applications.

@sean-perkins sean-perkins changed the title chore(core): compress distributed global stylesheets perf(css): compress distributed global stylesheets Apr 4, 2024
@sean-perkins sean-perkins changed the title perf(css): compress distributed global stylesheets perf(styles): compress distributed global stylesheets Apr 4, 2024
@sean-perkins sean-perkins added this pull request to the merge queue Apr 4, 2024
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to failed status checks Apr 4, 2024
@sean-perkins sean-perkins added this pull request to the merge queue Apr 5, 2024
Merged via the queue into main with commit b3cd49b Apr 5, 2024
@sean-perkins sean-perkins deleted the sp/css-compression branch April 5, 2024 14:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package

2 participants