Small improvements

- Track head links in a Map, because Set doesn't deduplicate them properly
- Make ServerHashedFileMapping independent of ThemeConfig
- Make theme pre-fetching configurable (e.g. only prefetch the main theme CSS, but leave route-based theme CSS lazy)

Author: ybnd

config/config.example.yml

@@ -78,7 +78,7 @@ cache:
     anonymousCache:
       # Maximum number of pages to cache. Default is zero (0) which means anonymous user cache is disabled.
       # As all pages are cached in server memory, increasing this value will increase memory needs.
-      # Individual cached pages are usually small (<100KB), so a value of max=1000 would only require ~100MB of memory. 
+      # Individual cached pages are usually small (<100KB), so a value of max=1000 would only require ~100MB of memory.
       max: 0
       # Amount of time after which cached pages are considered stale (in ms). After becoming stale, the cached
       # copy is automatically refreshed on the next request.
@@ -327,6 +327,7 @@ themes:
   # - name: BASE_THEME_NAME
   #
   - name: dspace
+    prefetch: true
     headTags:
     - tagName: link
       attributes:
@@ -379,7 +380,7 @@ vocabularies:
     vocabulary: 'srsc'
     enabled: true
 
-# Default collection/community sorting order at Advanced search, Create/update community and collection when there are not a query. 
+# Default collection/community sorting order at Advanced search, Create/update community and collection when there are not a query.
 comcolSelectionSort:
   sortField: 'dc.title'
-  sortDirection: 'ASC'
+  sortDirection: 'ASC'

server.ts

@@ -71,7 +71,7 @@ const cookieParser = require('cookie-parser');
 const configJson = join(DIST_FOLDER, 'assets/config.json');
 const hashedFileMapping = new ServerHashedFileMapping(DIST_FOLDER, 'index.html');
 const appConfig: AppConfig = buildAppConfig(configJson, hashedFileMapping);
-hashedFileMapping.addThemeStyles(appConfig.themes);
+appConfig.themes.forEach(themeConfig => hashedFileMapping.addThemeStyle(themeConfig.name, themeConfig.prefetch));
 hashedFileMapping.save();
 
 // cache of SSR pages for known bots, only enabled in production mode

src/config/theme.model.ts

@@ -20,6 +20,11 @@ export interface NamedThemeConfig extends Config {
    * A list of HTML tags that should be added to the HEAD section of the document, whenever this theme is active.
    */
   headTags?: HeadTagConfig[];
+
+  /**
+   * Whether this theme's CSS should be prefetched in CSR mode
+   */
+  prefetch?: boolean;
 }
 
 /**

src/modules/dynamic-hash/hashed-file-mapping.server.ts

@@ -22,7 +22,6 @@ import {
 } from 'path';
 import zlib from 'zlib';
 import { hasValue } from '../../app/shared/empty.util';
-import { ThemeConfig } from '../../config/theme.model';
 import {
   HashedFileMapping,
   ID,
@@ -45,7 +44,7 @@ export class ServerHashedFileMapping extends HashedFileMapping {
   public readonly indexPath: string;
   private readonly indexContent: string;
 
-  protected readonly headLinks: Set<HeadLink> = new Set();
+  protected readonly headLinks: Map<string, HeadLink> = new Map();
 
   constructor(
     private readonly root: string,
@@ -70,7 +69,7 @@ export class ServerHashedFileMapping extends HashedFileMapping {
 
     // remove previous files
     const ext = extname(path);
-    glob.GlobSync(path.replace(`${ext}`, `.*${ext}*`))
+    new glob.GlobSync(path.replace(`${ext}`, `.*${ext}*`))
         .found
         .forEach(p => rmSync(p));
 
@@ -111,33 +110,30 @@ export class ServerHashedFileMapping extends HashedFileMapping {
     return hashPath;
   }
 
-  /**
-   * Add CSS for all configured themes to the mapping
-   * @param themeConfigurations
-   */
-  addThemeStyles(themeConfigurations: ThemeConfig[]) {
-    for (const themeConfiguration of themeConfigurations) {
-      const path = `${this.root}/${themeConfiguration.name}-theme.css`;
-      const hashPath = this.add(path);
+  addThemeStyle(theme: string, prefetch = true) {
+    const path = `${this.root}/${theme}-theme.css`;
+    const hashPath = this.add(path);
 
+    if (prefetch) {
       // We know this CSS is likely needed, so we can avoid a FOUC by retrieving it in advance
       // Angular does the same for global styles, but doesn't "know" about our themes
       this.addHeadLink({
         path,
         rel: 'prefetch',
         as: 'style',
       });
-
-      this.ensureCompressedFilesAssumingUnchangedContent(path, hashPath, '.br');
-      this.ensureCompressedFilesAssumingUnchangedContent(path, hashPath, '.gz');
     }
+
+    // We know theme CSS has been compressed already
+    this.ensureCompressedFilesAssumingUnchangedContent(path, hashPath, '.br');
+    this.ensureCompressedFilesAssumingUnchangedContent(path, hashPath, '.gz');
   }
 
   /**
    * Include a head link for a given resource to the index HTML.
    */
   addHeadLink(headLink: HeadLink) {
-    this.headLinks.add(headLink);
+    this.headLinks.set(headLink.path, headLink);
   }
 
   private renderHeadLink(link: HeadLink): string {
@@ -175,7 +171,7 @@ export class ServerHashedFileMapping extends HashedFileMapping {
     root.querySelector('head')
         .appendChild(`<script id="${ID}" type="application/json">${JSON.stringify(out)}</script>` as any);
 
-    for (const headLink of this.headLinks) {
+    for (const headLink of this.headLinks.values()) {
       root.querySelector('head')
           .appendChild(this.renderHeadLink(headLink) as any);
     }