Excubo.Blazor.LazyStyleSheet 1.0.1

There is a newer version of this package available.
See the version list below for details.
dotnet add package Excubo.Blazor.LazyStyleSheet --version 1.0.1
NuGet\Install-Package Excubo.Blazor.LazyStyleSheet -Version 1.0.1
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="Excubo.Blazor.LazyStyleSheet" Version="1.0.1" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add Excubo.Blazor.LazyStyleSheet --version 1.0.1
#r "nuget: Excubo.Blazor.LazyStyleSheet, 1.0.1"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install Excubo.Blazor.LazyStyleSheet as a Cake Addin
#addin nuget:?package=Excubo.Blazor.LazyStyleSheet&version=1.0.1

// Install Excubo.Blazor.LazyStyleSheet as a Cake Tool
#tool nuget:?package=Excubo.Blazor.LazyStyleSheet&version=1.0.1

Why Excubo.Blazor.LazyStyleSheet?

A major issue on websites is slow page load. In part, this is due to enormous payloads that need to be downloaded in full before a page can be rendered correctly. Minimization and compression help to some degree, but it ignores the awkward fact that many style sheets are only used to a tiny fraction.

With HTTP/2, loading small files rather than one large one is less of a performance concern than with HTTP/1.1. Since Blazor uses HTTP/2 by default, we can make use of this and split style sheets into smaller chunks. Those chunks can then be loaded lazily, i.e. only when a component actually needs it.

Excubo.Blazor.LazyStyleSheet enables you to write dedicated style sheet for each component.

How to use

1. Install the nuget package Excubo.Blazor.LazyStyleSheet

Package Manager:
Install-Package Excubo.Blazor.LazyStyleSheet
.NET Cli:
dotnet add package Excubo.Blazor.LazyStyleSheet
Package Reference
<PackageReference Include="Excubo.Blazor.LazyStyleSheet" />

2. Add the service in your Startup.cs file

   //...
   services.AddStyleSheetLazyLoading();
   //...

3. Add the StyleSheets component to your App component

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>
<Excubo.Blazor.LazyStyleSheet.StyleSheets />

4. Add style sheets where necessary

@page "/hello"
@inject Excubo.Blazor.LazyStyleSheet.IStyleSheetService StyleSheetService

<div class="my-style">My styled component</div>

@code {
    protected override void OnInitialized()
    {
        StyleSheetService.Add("css/my_style.css"); // the StyleSheetService prevents styles from being added more than once
        base.OnInitialized();
    }
}

If you're writing a component library, don't forget to prefix the URL with _content/My.Package.Name/. You also need to instruct your users to follow step 2 and 3, or wrap this on behalf of the user.

Remarks

  • The StyleSheets component should only be used exactly once. However, except for a slight performance penalty, there is likely no issue by doing so. Of course there's no benefit to multiple StyleSheets components either.
  • Style sheet urls may be added any number of times, and will only be added to the DOM once (as duplicate link tags don't achieve anything). This only applies if the url string matches exactly, i.e. there is a difference between https://localhost/css/style.css and css/style.css.

Tips & tricks

For development it might be more convenient to have the css close to the razor component in the file hierarchy. However, for deployment, the css must be part of the static file assets, usually in wwwroot. You can create Component.razor.css files and automatically move them to the wwwroot folder with the following addition to your csproj file:

  <ItemGroup>
    <ComponentStyles Include="**\*.razor.css" Exclude="wwwroot\**" />
  </ItemGroup>
  
  <Target Name="CopyStyles" BeforeTargets="AfterBuild">
    <RemoveDir Directories="wwwroot\css\components" />
    <Copy SourceFiles="@(ComponentStyles)" DestinationFiles="@(ComponentStyles->'wwwroot\css\components\%(RecursiveDir)%(Filename)%(Extension)')" />
  </Target>

Remember to adjust the referenced path:

StyleSheetService.Add("/css/components/path/to/Component.razor.css");

Contribute

If you encounter any issues or have ideas for new features, please raise an issue in the repository on GitHub.

Product Compatible and additional computed target framework versions.
.NET net5.0 was computed.  net5.0-windows was computed.  net6.0 was computed.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 was computed.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 was computed.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
.NET Core netcoreapp3.1 is compatible. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
3.1.21 785 11/9/2021
3.1.19 643 9/15/2021
3.1.18 671 8/11/2021
3.1.17 681 7/19/2021
3.1.14 655 4/7/2021
3.1.13 741 3/3/2021
3.1.11 778 1/13/2021
3.1.9 764 11/13/2020
3.1.8 32,012 10/13/2020
3.1.7 2,932 9/30/2020
3.1.5 3,551 9/8/2020
3.1.4 4,105 8/12/2020
3.1.3 3,009 7/24/2020
3.1.2 1,444 7/20/2020
3.1.1 1,826 7/14/2020
3.0.0 1,104 7/10/2020
2.0.9 2,882 6/15/2020
2.0.8 838 6/5/2020
2.0.7 829 5/13/2020
2.0.6 843 5/13/2020
2.0.5 818 5/1/2020
2.0.2 859 5/1/2020
2.0.1 794 4/28/2020
2.0.0 870 3/27/2020
1.0.1 842 3/26/2020
1.0.0 851 3/11/2020