client-side cache for compiled assets

[FranckFreiburger]

Straightforward, localStorage-based, client-side cache for compiled assets

    class CompileCache {

      constructor() {
        
        this.storage = window.localStorage;
        this.ns = 'v3sfcl';
      }

      removeStalestItem() {

        let lowestValue = Infinity;
        let lowestKey = undefined;
        for ( let i = 0, len = window.localStorage.length; i < len; ++i ) {

          const key = window.localStorage.key(i);
          if ( !key.startsWith(this.ns) || !key.endsWith('_') )
            continue;
          const value = Number(this.storage.getItem(key));
          if ( value >= lowestValue )
            continue;
          lowestValue = value;
          lowestKey = key.slice(0, -1);
        }

        if ( lowestKey === undefined )
          return

        this.storage.removeItem(lowestKey + '_');
        this.storage.removeItem(lowestKey);
      }

      get(key) {
        
        this.storage.setItem(this.ns + key + '_', Math.floor((Date.now() - 17e11) / 36e5));
        return this.storage.getItem(this.ns + key) || undefined;
      }

      set(key, value) {
        
        for ( let i = 0; i < 10; ++i ) {

          try {

              this.storage.setItem(this.ns + key, value);
              break;
          } catch(ex) {

            this.removeStalestItem();
          }
        }
      }
    }

Usage:
just add compiledCache: new CompileCache() in your vue3-sfc-loader options like this:

    const options = {
      ...
      compiledCache: new CompileCache(),
      ...
    }