Skip to content

feat(@angular-devkit/build-angular): enable inlining of critical CSS optimizations #19449

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Dec 4, 2020
Merged

feat(@angular-devkit/build-angular): enable inlining of critical CSS optimizations #19449

merged 1 commit into from
Dec 4, 2020

Conversation

alan-agius4
Copy link
Collaborator

@alan-agius4 alan-agius4 commented Nov 20, 2020

This is another feature that we mentioned in the Eliminate Render Blocking Requests RFC (#18730)

Inlining of critical CSS is turned off by default. To opt-in this feature set inlineCritical to true.

Example:

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    "optimization": {
      "styles": {
        "minify": true,
        "inlineCritical": true,
       }
    },

To learn more about critical CSS see;
https://web.dev/defer-non-critical-css
https://web.dev/extract-critical-css/

In a future version of the Angular CLI inlineCritical will be enabled by default.

Closes: #17966
Closes: #11395
Closes: #19445

@google-cla google-cla bot added the cla: yes label Nov 20, 2020
@alan-agius4 alan-agius4 added the target: major This PR is targeted for the next major release label Nov 20, 2020
@alan-agius4 alan-agius4 requested a review from clydin November 23, 2020 09:33
@alan-agius4 alan-agius4 marked this pull request as ready for review November 23, 2020 09:34
@alan-agius4 alan-agius4 added the needs: discussion On the agenda for team meeting to determine next steps label Dec 1, 2020
@alan-agius4 alan-agius4 removed the needs: discussion On the agenda for team meeting to determine next steps label Dec 3, 2020
@alan-agius4 alan-agius4 requested review from clydin and removed request for clydin December 4, 2020 10:24
@alan-agius4 alan-agius4 added action: merge The PR is ready for merge by the caretaker and removed action: merge The PR is ready for merge by the caretaker labels Dec 4, 2020
…optimizations

This is another feature that we mentioned in the Eliminate Render Blocking Requests RFC (#18730)

Inlining of critical CSS is turned off by default. To opt-in this feature set `inlineCritical` to `true`.

Example:
```json
"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    "optimization": {
      "styles": {
        "minify": true,
        "inlineCritical": true,
       }
    },
```

To learn more about critical CSS see;
https://web.dev/defer-non-critical-css
https://web.dev/extract-critical-css/

In a future version of the Angular CLI `inlineCritical` will be enabled by default.

Closes: #17966
Closes: #11395
Closes: #19445
@alan-agius4 alan-agius4 added the action: merge The PR is ready for merge by the caretaker label Dec 4, 2020
@clydin clydin merged commit eb30a92 into angular:master Dec 4, 2020
@alan-agius4 alan-agius4 deleted the criticial-css-implement branch December 4, 2020 20:42
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Jan 4, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker target: major This PR is targeted for the next major release
Projects
None yet
3 participants