High "Unused JavaScript" warnings in Fusion generated bundles (default.js) - Best practices for Code Splitting?

[Gapuccino]

Hello everyone,

I am currently working on optimizing the Core Web Vitals for our site, specifically focusing on the "Reduce unused JavaScript" warning in PageSpeed Insights/Lighthouse.

I noticed that the main contributors to this warning are the generated bundle files, particularly:

...combinations/default.js

...engine/react.js

I understand that these files are generated automatically by the Fusion build process (e.g., when running npx fusion zip) and contain the bundled code from our custom blocks and features.

My questions are:

Code Splitting: Is it safe/recommended to implement code splitting within our Custom Blocks using libraries like @loadable/component to break up this large default.js file?

Configuration: Is there any specific configuration within the fusion ecosystem (webpack overrides or specific flags) that we should use to optimize tree-shaking or chunk generation?

Best Practices: Are there any standard patterns for handling heavy third-party libraries (like video players or chart libraries) within Fusion blocks to prevent them from bloating the initial bundle?

Any advice or examples on how to properly implement code splitting in a Fusion environment would be greatly appreciated.

Thanks in advance!

[radominchev]

Hello 👋 @Gapuccino,
You’re right that combinations/default.js is usually what Lighthouse flags for “Reduce unused JavaScript”, and engine/react.js is part of the Arc runtime, so you have limited control over that one.

Let me go through your questions briefly:

1. Code splitting in custom blocks

Yes, it’s safe and recommended to use code splitting, but the preferred way in Arc is to use the engine’s built-in lazy loading rather than custom Webpack tweaks.

For any heavy feature/block, you can mark it as lazy so it’s built as a separate chunk and only loaded when needed, for example:

const Feature = () => {
  return <HeavyThing />;
};

Feature.lazy = ['default']; // or true for all outputs

export default Feature;

This works nicely with server-side rendering and is the officially supported pattern.

2. Webpack / configuration

You generally don’t need to override Webpack. Tree-shaking is already enabled; the bigger wins come from how you import things:

• Prefer ESM / named imports instead of pulling in whole libraries:

  import { format } from 'date-fns';     // ok
  import groupBy from 'lodash/groupBy'; // ok
  // avoid: import _ from 'lodash'       // not recommended

• Avoid require() where possible.
• Run a bundle analyzer on .fusion/dist/stats.json to see which blocks/libs are actually blowing up default.js.

3. Heavy third-party libraries

For large libs (video players, charts, date libs, etc.), a few patterns help:

• Only import what you actually need (many chart libs support per-chart imports).
• Put those imports inside features you can mark as Feature.lazy, instead of layouts or global code.

4. What you can realistically improve

engine/react.js itself is part of the core engine and not something you’ll shrink directly. The levers you do have are:

• Reducing what goes into combinations/default.js.
• Splitting rarely used or heavy features into lazy chunks.
• Cleaning up imports so Webpack can tree-shake more aggressively.

If you’d like to share one concrete example (e.g., which video or chart library you’re using), I can help sketch a more specific pattern for that use case.

More information about Code-splitting your can see in the following docs:

• How to do code splitting
• Splitting and Dynamic Imports

Best, Rado

[Gapuccino]

Hi Rado,

Thank you for the detailed explanation. This clears up my confusion regarding engine/react.js versus combinations/default.js.

I will definitely start implementing the Feature.lazy pattern for our heavier blocks and review our imports to ensure we are using named imports to help with tree-shaking.

Regarding your offer to help with a concrete example: We are currently using [Insert Name of Library, e.g., JWPlayer / Chart.js] in one of our custom blocks, and it seems to be contributing significantly to the bundle size. Could you advise on the best way to structure this specific implementation using the lazy loading pattern?

Thanks again for the help!

Best regards, Gabo.

[radominchev]

Hey @Gapuccino I'm adding the README.md file of the feature pack and the code for your reference

Lazy-load Feature Block

This folder demonstrates how to build a Fusion block that keeps its initial
bundle small while still delivering a rich visualization when the user
requests it.

Key pieces

1. default.jsx renders the block “shell.” It shows the summary numbers
   immediately and wraps the chart area in React.Suspense. The shell imports
   the heavy chart renderer with React.lazy, so webpack emits the chart code
   into its own chunk (chart-block-chart-renderer.js).
2. chart-renderer.jsx lives inside that lazy chunk. It is the only place that
   imports react-chartjs-2/chart.js, so Chart.js never hits the main
   bundle. Once the suspense boundary resolves, this component renders the
   actual line chart.

How it works

1. Fusion loads the lazy-load block.
2. Users immediately see the summary copy plus a lightweight “Loading chart…”
   placeholder.
3. As soon as the React.lazy dynamic import resolves, the chart chunk is
   executed and chart-renderer.jsx replaces the placeholder with a real
   Chart.js line chart.

This pattern keeps the customer-facing experience responsive on slower devices
while preserving the flexibility of a full charting library.

// components/features/lazy-load/chart-renderer.jsx
import React from 'react';
import { Line } from 'react-chartjs-2';

const labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
const datasetValues = [120, 150, 180, 160, 210];

// Static dataset keeps the renderer focused on wiring up Chart.js.
const data = {
  labels,
  datasets: [
    {
      label: 'Page views',
      data: datasetValues,
      lineTension: 0.3,
      borderColor: '#1890ff',
      backgroundColor: 'rgba(24, 144, 255, 0.1)',
      borderWidth: 2,
      pointRadius: 3,
    },
  ],
};

const options = {
  responsive: true,
  maintainAspectRatio: false,
  legend: { display: false },
  scales: {
    yAxes: [
      {
        ticks: { beginAtZero: true },
        gridLines: { color: 'rgba(15, 23, 42, 0.1)' },
      },
    ],
  },
};

// Rendered only once the lazy chunk finishes downloading.
const ChartRenderer = () => (
  <div className="c-chart-block__chart-container">
    <Line data={data} options={options} />
  </div>
);

export default ChartRenderer;

// components/features/lazy-load/default.jsx
import React, { Suspense, lazy } from 'react';

// Load the heavy chart bundle on demand so the block shell stays lightweight.
const LazyChartRenderer = lazy(() =>
  import(
    /* webpackChunkName: "chart-block-chart-renderer" */
    './chart-renderer'
  ),
);

const ChartBlock = () => (
  <div className="c-chart-block">
    <div className="c-chart-block__summary">
      <p className="c-chart-block__label">Page views</p>
      <p className="c-chart-block__value">210</p>
      <p className="c-chart-block__change" aria-label="Change since Monday: +90">
        ▲ +90
      </p>
    </div>

    <Suspense
      fallback={
        <div className="c-chart-block__chart-container c-chart-block__placeholder">
          Loading chart…
        </div>
      }
    >
      {/* The renderer pulls in Chart.js only when users scroll this far. */}
      <LazyChartRenderer />
    </Suspense>
  </div>
);

ChartBlock.label = 'Chart Block';
ChartBlock.icon = 'chart';
ChartBlock.lazy = ['default'];

export default ChartBlock;

Here is how fusion renders the block enclosed in data-fusion-lazy-id div

            <div data-fusion-lazy-id="f0fmcdKYFKb816e">
                        <div class="c-chart-block">
                              <div class="c-chart-block__summary">
                                    <p class="c-chart-block__label">Page views</p>
                                    <p class="c-chart-block__value">210</p>
                                    <p class="c-chart-block__change" aria-label="Change since Monday: +90">▲ +90</p>
                                </div>
                                <!--$-->
                                <div class="c-chart-block__chart-container">
                                    <canvas height="150" width="300">
                                    </canvas>
                                </div>
                                <!--/$-->
                            </div>
                        </div>
                        <div class="c-chart-block__chart-container">
                            <canvas height="150" width="300">
                            </canvas>
                        </div>
                    </div>

This is the chart rendered:

Hope this helps!
Rado