Feature Request: Lazy Loading / On-Demand Toggle Fetching

[juliomariano-hotmart]

Describe the feature request

Summary

Add support for lazy loading toggles instead of fetching all toggles on initialization and refresh cycles to reduce bundle size and improve performance metrics.

Problem Description

Currently, the unleash-proxy-client loads all available toggles during:

• Client initialization
• Automatic refresh cycles

This behavior is causing several issues in our frontend application:

• Increased bundle size: All toggle data is loaded upfront, even for toggles that may never be used
• Performance degradation: Large payload on initial load impacts metrics like First Contentful Paint (FCP) and Largest Contentful Paint (LCP)
• Network overhead: Unnecessary data transfer for unused feature flags
• Memory consumption: Storing toggle data that might not be accessed during the session

We are using unleash-edge as our proxy and would like more granular control over when toggle data is fetched.

Background

Use Cases

Single Page Applications: Load only the toggles needed for the current route
Micro-frontends: Each micro-frontend loads only its relevant toggles
Performance-critical applications: Reduce initial bundle size and improve loading metrics
Limited bandwidth environments: Minimize data transfer

Benefits

Reduced initial payload size
Improved performance metrics (FCP, LCP)
Lower memory usage
Better network efficiency
Maintains backward compatibility
Flexible caching strategy

Solution suggestions

Proposed Solution

Add configuration options to enable lazy loading with the following behavior:

1. Configuration Option

const unleash = new UnleashClient({
  url: 'https://unleash-edge.example.com/proxy',
  clientKey: 'your-client-key',
  appName: 'my-app',
  // New configuration options
  fetchStrategy: 'lazy', // 'eager' (default) | 'lazy'
});

### 2. On-Demand Toggle Fetching
When fetchStrategy: 'lazy' is enabled:

No toggles are fetched during initialization
Toggles are fetched individually when isEnabled() is called for the first time
Implement caching to avoid redundant requests for the same toggle

```javascript
// This would trigger a network request only for 'my-feature' toggle
const isEnabled = await unleash.isEnabled('my-feature');

[FredrikOseberg]

Hi @juliomariano-hotmart

Thanks for the detailed feature request - lazy loading is definitely an interesting optimization approach. However, I think there might be some confusion about how the unleash-proxy-client currently works that could help address your performance concerns right now.

You mentioned that the client "loads all toggles" and causes "increased bundle size," but here's what's actually happening:

The unleash-proxy-client only returns feature flags that evaluate to true for a given context. This means:

• It doesn't fetch "all" toggles - only the ones enabled for your current user/context
• Payload size scales with enabled flags, not total flags in your system

Leveraging this knowledge, here's an example of how you could achieve something like what you describe:

For SPAs, update context when routes change to get only relevant flags:

// On route change
unleash.updateContext({
  properties: {
    currentRoute: 'dashboard',
  }
});

Then setup a corresponding strategy that has a constraint on a custom context field that requires 'dashboard' to be true.

[juliomariano-hotmart]

Thanks for the feedback, @FredrikOseberg
I apologize for the confusion, as only active toggles are loaded.

I tried following your suggestion, but was unsuccessful.

I created a context field named "appName."
I went to one of my toggles and added a "Gradual Rollout" strategy and set the appName as the Constraint, defining the name of my application: "app-template-manager."

In my application, I made the following adjustments:

// Client
import { UnleashClient } from 'unleash-proxy-client';

const unleash = new UnleashClient({
  url: url,
  clientKey: token,
  appName: 'app-template-manager',
  refreshInterval: 5
});

unleash.start();

export default unleash;

// Service
UnleashService.updateContext({
      properties: {
        appName: 'app-template-manager'
      }
    });
console.log(JSON.stringify(UnleashService, null, 2));

However, when validating the loaded toggles, all the active ones continued to appear.

[FredrikOseberg]

I created a context field named "appName."

All the toggles that evaluate to true will be returned to the frontend. So you need to make sure that you constrain on something that will restrict access for the user. If appName is the same for all users then essentially all users will pass the constrain check. You need a property that will discriminate.

[FredrikOseberg]

Hi. I'm closing this for now. Feel free to open if you think this needs further consideration.