Merge pull request #112 from TechnologyEnhancedLearning/refactor-optimisations

Refactor optimisations

Author: Phil-NHS

.github/PULL_REQUEST_TEMPLATE.md

@@ -25,6 +25,29 @@ _Paste screenshots for all views created or changed: mobile, tablet and desktop,
 ### Logging
 _Provide description of any component scoped logging or specific level logging to check
 
+### Size Optimisation
+_Provide wasm size comparison between prod and dev showcases, does it exceed 8Mb
+- Network tab in Chrome
+- Disable cache
+- reload
+- filter wasm dll js dotnet.wasm, blazor.webassembly.js, TELBlazor.dll
+- if using compression check .br or .gz (if Content-Encoding: br or gz is in headers)
+- Sum up
+
+| Measure | [Dev](https://technologyenhancedlearning.github.io/TELBlazor-DevShowCase/) Value  | [Prod](https://technologyenhancedlearning.github.io/TELBlazor/) Value | Difference | Notes |
+|----------|--------------------------------------------------------------------------|----------------------------------------------------------------------|-------|-------|
+|   Load Size   | X.X MB                          |       |
+|   Lighthouse Accessibility Score  | Y.Y MB                          |       |
+| Difference |   |  |
+
+
+-----
+### Recommended Prepipeline steps
+These test are run by the pipeline but running them locally can be convenient to see issues early or to debug issues seen in the pipeline locally.
+- Run against release configuration by select release configuration at the the top of solution explorer (to check against optimisation such as tree shaking for example)
+	- clean rebuild the solution
+	- run tests against release
+
 -----
 ### Developer checks
 (Leave tasks unticked if they haven't been appropriate for your ticket.)
@@ -43,8 +66,10 @@ I have:
 - [ ] Updated my Jira ticket with testing notes, including information about other parts of the system that were touched as part of the PR and need  to be tested to ensure nothing is broken
 - [ ] Tested in [Dev Showcase](https://technologyenhancedlearning.github.io/TELBlazor-DevShowCase/) (including logging by using log level switcher)
 - [ ] Scanned over my pull request and commented with any useful explanations/questions to reviewers
-- [ ] Scanned over cicd warnings
-
+- [ ] Scanned over cicd warnings relating to the component or area of code I have worked on (give the general ones a look too but antyhing in OptionalImplementations/Test can be ignored)
+- [ ] Maybe? Audit NuGet packages; use lightweight ones (e.g., System.Text.Json); ensure third-party components support trimming.
+- [ ] Scanned in visual studio build info messages about improving code for new code
+- [ ] 
 ---
 ### Peer Reviewers and Assignee checks before Approval
 - [ ] Feedback has been provided

.github/workflows/dev.yml

@@ -204,10 +204,14 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: '20'
+          
 
       - name: Install npm packages so we have gulp for retrieving TEL Frontend Css
         run: npm ci
         #CI is an install that adheres to package-lock
+        
+      - name: Install wasm-tools workload (wasm-tools used for delinking so can test against optimised client wasm using TELBlazor package)
+        run: dotnet workload install wasm-tools --skip-manifest-update --source https://api.nuget.org/v3/index.json  
 
       - name: Build TELBlazor.Components (it publishes on build)
         run: |
@@ -301,6 +305,9 @@ jobs:
 
       - name: Install npm packages so we have gulp for retrieving TEL Frontend Css
         run: npm ci   
+        
+      - name: Install wasm-tools workload (wasm-tools used for delinking so can test against optimised client wasm using TELBlazor package)
+        run: dotnet workload install wasm-tools --skip-manifest-update --source https://api.nuget.org/v3/index.json  
 
       - name: Build solution without generating new package
         run: |

.github/workflows/release.yml

@@ -209,7 +209,9 @@ jobs:
         run: npm ci
         #CI is an install that adheres to package-lock
 
-
+      - name: Install wasm-tools workload (wasm-tools used for delinking so can test against optimised client wasm using TELBlazor package)
+        run: dotnet workload install wasm-tools --skip-manifest-update --source https://api.nuget.org/v3/index.json
+        
       - name: Build and pack TELBlazor.Components
         run: |
           dotnet build TELBlazor.Components -c Release \
@@ -294,8 +296,11 @@ jobs:
             node-version: '20'
 
         - name: Install npm packages so we have gulp for retrieving TEL Frontend Css
-          run: npm ci  
-
+          run: npm ci
+          
+        - name: Install wasm-tools workload (wasm-tools used for delinking so can test against optimised client wasm using TELBlazor package)
+          run: dotnet workload install wasm-tools --skip-manifest-update --source https://api.nuget.org/v3/index.json
+        
         - name: Build solution without generating new package
           run: |
             dotnet build TELBlazor.sln -c Release \

.github/workflows/reuseable-ci-checks.yml

@@ -200,8 +200,6 @@ jobs:
           - name: Replace local environment variable in nuget config because cant provide it as a parameter
             run: |
               sed -i "s|%TEL_BLAZOR_PACKAGE_SOURCE%|$LOCAL_PACKAGES_PATH|g" nuget.config
-            # sed -i "s|%GITHUB_USERNAME%|$GITHUB_USERNAME|g" nuget.config
-            # sed -i "s|%TEL_GIT_PACKAGES_TOKEN%|$TEL_GIT_PACKAGES_TOKEN|g" nuget.config
        
           - name: Clean lock files because the newly generated package file will superseed the locks
             run: |
@@ -239,29 +237,29 @@ jobs:
 
           - name: Build and create package locally
             run: |
-              dotnet build TELBlazor.Components -c Debug \
+              dotnet build TELBlazor.Components -c Release \
                 /p:TELBlazorPackageVersion=$TELBLAZOR_PACKAGE_VERSION \
                 /p:NugetPackagesOutputPath=$NUGET_PACKAGES_OUTPUT_PATH \
                 /p:UseTELBlazorComponentsProjectReference=$USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE \
                 /p:DisablePackageGeneration=false
               
           - name: Build solution without generating new package
             run: |
-              dotnet build TELBlazor.sln -c Debug \
+              dotnet build TELBlazor.sln -c Release \
                 /p:TELBlazorPackageVersion=$TELBLAZOR_PACKAGE_VERSION \
                 /p:NugetPackagesOutputPath=$NUGET_PACKAGES_OUTPUT_PATH \
                 /p:UseTELBlazorComponentsProjectReference=$USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE \
                 /p:DisablePackageGeneration=true
                 
               
           - name: Ensure browsers are installed
-            run: pwsh TELBlazor.Components.ShowCase.E2ETests/bin/Debug/net8.0/playwright.ps1 install --with-deps  
+            run: pwsh TELBlazor.Components.ShowCase.E2ETests/bin/Release/net8.0/playwright.ps1 install --with-deps  
 
 
           - name: Run tests with coverage threshold check
             id: unit_e2e_tests
             run: |
-              dotnet test --no-build --no-restore \
+              dotnet test --no-build --no-restore -c Release \
                 /p:TELBlazorPackageVersion=$TELBLAZOR_PACKAGE_VERSION \
                 /p:NugetPackagesOutputPath=$NUGET_PACKAGES_OUTPUT_PATH \
                 /p:UseTELBlazorComponentsProjectReference=$USE_TEL_BLAZOR_COMPONENTS_PROJECT_REFERENCE \

README.md

@@ -91,19 +91,22 @@ the ability to produce static prerendered html. The prerendered html is written
 		  --password $env:TEL_GIT_PACKAGES_TOKEN `
 		  --store-password-in-clear-text
 
-		# 3. Restore .NET CLI tools (Playwright, report manager for code coverage)
+		#3. Install wasm-tools this allows delinking so we can have smalled wasm files producted by client projects consuming the Package. Specifying nuget to stop azure package issues.
+		dotnet workload install wasm-tools --skip-manifest-update --source https://api.nuget.org/v3/index.json
+
+		# 4. Restore .NET CLI tools (Playwright, report manager for code coverage)
 		Write-Output "Restore Tools"
 		dotnet tool restore
 
-		# 4. Install Node dependencies (gulp, playwright, frontend libs)
+		# 5. Install Node dependencies (gulp, playwright, frontend libs)
 		Write-Output "Restore Node"
 		npm install
 		
-		# 5. Build solution or run other commands as needed
+		# 6. Build solution or run other commands as needed
 		Write-Output "Build solution without build package, using project references instead of local package or remote package"
 		dotnet build
 		
-		# 6. Setup playwright
+		# . Setup playwright
 		Write-Output "Playwright setup"
 		& ".\TELBlazor.Components.ShowCase.E2ETests\bin\Debug\net8.0\playwright.ps1" install
 	```
@@ -335,6 +338,8 @@ recommend tool it is designed for though both support the others tool.
 - not using guid id as i have elsewhere either [Parameter] public string ElementId { get; set; } = $"tel-button-{Guid.NewGuid():N}";
 - various things have been cut from mvcblazor so it is worth returning to for potential solutions if developing this solution [MVCBlazor repo](https://github.com/TechnologyEnhancedLearning/MVCBlazor)
 
+#### Compression
+
 
 # Project Structure and Comments
 

TELBlazor.Components.ShowCase.E2ETests.WasmServerHost/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client/TELBlazor.Components.ShowCase.E2ETests.WasmServerHost.Client.csproj

@@ -11,7 +11,39 @@
 	<Configurations>Debug;Release;ci</Configurations>
 
   </PropertyGroup>
+	
+  <!--Testing against Release optimisations-->
+	<PropertyGroup Condition="'$(Configuration)' == 'Release'">
+
+	  <!-- Trims unused code to reduce size. Can break reflection/serialization. -->
+	  <PublishTrimmed>true</PublishTrimmed>
+
 
+	  <!--
+    Trim culture-specific resources to reduce WASM download size.
+    Current reasoning: Our app only targets invariant formatting (no multi-culture UI).
+    Trade-off: Any culture-specific number, date, or currency formatting will not work.
+    Remove if your app needs localized formatting.
+  -->
+	  <InvariantGlobalization>true</InvariantGlobalization>
+
+	  <!--
+    Trim timezone support to reduce WASM size.
+    Current reasoning: Our app only uses UTC or fixed offsets; we don't need full client-side timezone info.
+    Trade-off: Client-side timezone conversions will not work.
+    Remove if your app displays local time or uses time zone conversions.
+  -->
+	  <InvariantTimeZone>true</InvariantTimeZone>
+	  <BlazorEnableTimeZoneSupport>false</BlazorEnableTimeZoneSupport>
+
+	  <!--
+    Strip collation data for different cultures.
+    Current reasoning: Only invariant string comparisons/sorting are needed, reducing payload size.
+    Trade-off: String comparison may behave differently across cultures; e.g., sorting might be incorrect for localized strings.
+    Remove if your app relies on culturally correct string comparisons/sorting.
+  -->
+	  <BlazorWebAssemblyPreserveCollationData>false</BlazorWebAssemblyPreserveCollationData>
+  </PropertyGroup>
   <ItemGroup>
     <Content Remove="Properties\launchSettings.template.json" />
   </ItemGroup>

TELBlazor.Components.ShowCase.E2ETests/Helpers/BrowserHelper.cs

@@ -13,22 +13,14 @@ public static class BrowserHelper
 
         public static async Task<IBrowserContext> CreateBrowserContextAsync(IPlaywright playwright, string browserType, bool jsEnabled, ViewportType viewport, string baseUrl)
         {
-            IBrowser browser;
 
-            switch (browserType.ToLower())
+            IBrowser browser = browserType.ToLower() switch
             {
-                case "chromium":
-                    browser = await playwright.Chromium.LaunchAsync(new BrowserTypeLaunchOptions {  });
-                    break;
-                case "firefox":
-                    browser = await playwright.Firefox.LaunchAsync(new BrowserTypeLaunchOptions {  });
-                    break;
-                case "webkit":
-                    browser = await playwright.Webkit.LaunchAsync(new BrowserTypeLaunchOptions { });
-                    break;
-                default:
-                    throw new ArgumentException($"Unsupported browser type: {browserType}");
-            }
+                "chromium" => await playwright.Chromium.LaunchAsync(new BrowserTypeLaunchOptions { }),
+                "firefox" => await playwright.Firefox.LaunchAsync(new BrowserTypeLaunchOptions { }),
+                "webkit" => await playwright.Webkit.LaunchAsync(new BrowserTypeLaunchOptions { }),
+                _ => throw new ArgumentException($"Unsupported browser type: {browserType}")
+            };
 
 
             BrowserNewContextOptions contextOptions = new BrowserNewContextOptions
@@ -42,7 +34,6 @@ public static async Task<IBrowserContext> CreateBrowserContextAsync(IPlaywright
             IBrowserContext context = await browser.NewContextAsync(contextOptions);
 
             return context;
-
         }
 
     }

TELBlazor.Components.ShowCase.E2ETests/Pages/BaseComponentPages/TELButtonPageTests.cs

@@ -62,6 +62,7 @@ await browserContext.Tracing.StartAsync(new()
             // await page.WaitForSelectorAsync("button");
             await page.GetByRole(AriaRole.Button, new() { Name = "Click Counter" }).WaitForAsync();
             ILocator button = page.GetByRole(AriaRole.Button, new() { Name = "Click Counter" });
+            await button.WaitForAsync(new() { State = WaitForSelectorState.Visible });
 
             AxeResult axeResults = await button.RunAxe();
 

TELBlazor.Components.ShowCase.WasmStaticClient/TELBlazor.Components.ShowCase.WasmStaticClient.csproj

@@ -10,6 +10,38 @@
 	<Configurations>Debug;Release;ci</Configurations>
   </PropertyGroup>
 
+  <!--Release optimisations-->
+  <PropertyGroup Condition="'$(Configuration)'=='Release'">
+	  <!-- Trims unused code to reduce size. Can break reflection/serialization. -->
+	  <PublishTrimmed>true</PublishTrimmed>
+
+
+	  <!--
+    Trim culture-specific resources to reduce WASM download size.
+    Current reasoning: Our app only targets invariant formatting (no multi-culture UI).
+    Trade-off: Any culture-specific number, date, or currency formatting will not work.
+    Remove if your app needs localized formatting.
+  -->
+	  <InvariantGlobalization>true</InvariantGlobalization>
+
+	  <!--
+    Trim timezone support to reduce WASM size.
+    Current reasoning: Our app only uses UTC or fixed offsets; we don't need full client-side timezone info.
+    Trade-off: Client-side timezone conversions will not work.
+    Remove if your app displays local time or uses time zone conversions.
+  -->
+	  <InvariantTimeZone>true</InvariantTimeZone>
+	  <BlazorEnableTimeZoneSupport>false</BlazorEnableTimeZoneSupport>
+
+	  <!--
+    Strip collation data for different cultures.
+    Current reasoning: Only invariant string comparisons/sorting are needed, reducing payload size.
+    Trade-off: String comparison may behave differently across cultures; e.g., sorting might be incorrect for localized strings.
+    Remove if your app relies on culturally correct string comparisons/sorting.
+  -->
+	  <BlazorWebAssemblyPreserveCollationData>false</BlazorWebAssemblyPreserveCollationData>
+  </PropertyGroup>
+	
   <Target Name="AddNoJekyllForGitHubPagesDeployment" AfterTargets="Publish">
 	<Touch Files="$(PublishDir).nojekyll" AlwaysCreate="true" />
   </Target>