mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
perf(styles): compress distributed global stylesheets (#29275)
Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> 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? <!-- Please describe the behavior or changes that are being added by this PR. --> - Compresses the generated output from Sass → CSS to strip out multi-line comment blocks. - Developers can use [loud comments](https://sass-lang.com/documentation/syntax/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 - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Dev-build: `7.8.4-dev.11712251308.1da8aede`
This commit is contained in:
@@ -77,7 +77,7 @@
|
||||
"build.docs.json": "stencil build --docs-json dist/docs.json",
|
||||
"clean": "node scripts/clean.js",
|
||||
"css.minify": "cleancss -O2 -o ./css/ionic.bundle.css ./css/ionic.bundle.css",
|
||||
"css.sass": "sass --embed-sources src/css:./css",
|
||||
"css.sass": "sass --embed-sources --style compressed src/css:./css",
|
||||
"eslint": "eslint src",
|
||||
"lint": "npm run lint.ts && npm run lint.sass && npm run prettier -- --write --cache",
|
||||
"lint.fix": "npm run lint.ts.fix && npm run lint.sass.fix && npm run prettier -- --write --cache",
|
||||
|
||||
Reference in New Issue
Block a user