Skip to content

Conversation

davidchin
Copy link
Contributor

@davidchin davidchin commented Sep 1, 2025

What/Why?

checkout-sdk-js currently bundles all payment, shipping, and checkout button strategies for every payment provider, regardless of whether they are enabled by the merchant. This leads to unnecessary code in the main bundle, increasing its size and reducing performance.

To address this problem, the following changes are introduced:

  • Added a new export, @bigcommerce/checkout-sdk/essential, which excludes all payment, shipping, and checkout button strategies from the bundle.
  • Added an ESM build, allowing the library to be fully tree-shakable.
  • Updated strategy loading so that strategies are imported from @bigcommerce/checkout-sdk/integrations/* on the application side and passed into CheckoutService only when needed. This enables splitting strategies into separate chunks based on the component that loads them.
// App.tsx
import { createCheckoutService } from '@bigcommerce/checkout-sdk/essential';

const service = createCheckoutService();
// PayPalCommercePaymentMethod.tsx
import { createPayPalCommercePaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/paypal-commerce';

await service.initializePayment({
    methodId: 'paypal',
    integrations: [createPayPalCommercePaymentStrategy],
});
  • To reduce risk during the initial rollout, strategies will still be bundled as usual while the CHECKOUT-9450.lazy_load_payment_strategies experiment is active. We will compare the bundled strategies with those passed in from checkout-js and log any discrepancies in Sentry. Once we confirm that all passed-in strategies consistently match the existing ones, we will remove the bundled strategies.

Rollout/Rollback

Disable CHECKOUT-9450.lazy_load_payment_strategies experiment

Testing / Proof

The screenshots below show the improvements after the experiment is fully rolled out and the old code removed.

Before

716kb gzipped size for the initial scripts

Screenshot 2025-09-05 at 4 16 08 pm

After

546kb gzipped size for the initial scripts - ~24% improvement

Screenshot 2025-09-05 at 4 10 51 pm

This screenshot shows that payment methods still load as expected.

Screenshot 2025-09-11 at 3 16 25 pm

@davidchin davidchin force-pushed the lazy_strategies branch 5 times, most recently from 8371880 to 4ed2273 Compare September 5, 2025 06:09
@davidchin davidchin marked this pull request as ready for review September 5, 2025 06:20
@davidchin davidchin requested review from a team as code owners September 5, 2025 06:20
@davidchin davidchin force-pushed the lazy_strategies branch 5 times, most recently from 135966b to 5003459 Compare September 12, 2025 00:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant