Section Code Splitting

Code Splitting is a performance optimization technique in which each section is split into a separate bundle and loaded only when needed. Bundlers like Webpack support this, enabling lazy loading of components at runtime. Instead of including all sections in a single large file, code splitting ensures that only the necessary parts are loaded during the initial page render. This is especially useful for large storefronts with many dynamic sections.

Benefits

• Faster initial load times
• Better performance on mobile and slower networks
• Scalable architecture for large storefronts

Prerequisite

• Make sure you are using FDK CLI version 7.0.1 or above to enable code splitting support.

Steps to Implement Code Splitting

1. Add the following feature flag in package.json file:

"fdk_feature": {
  "enable_section_chunking": true
}

2. Add the following packages in package.json file:

"dependencies": {
  "@loadable/babel-plugin": "^5.16.1",
  "@loadable/component": "^5.16.4"
}

3. In webpack.config.js file, add @loadable/babel-plugin to Babel loader configuration.

rules: [{
  test: /\.(ts|tsx)$/,
  exclude: /node_modules/,
  use: [
    {
      loader: "babel-loader",
      options: {
        presets: [
          [
            "@babel/preset-env",
            {
              targets: "defaults",
            },
          ],
          "@babel/preset-react",
          "@babel/preset-typescript",
          "@loadable/babel-plugin"
        ],
      },
    },
  ],
}]

4. Add default export in each section component. For example:

import React from "react";
import ImageBanner from "../components/image-banner-section/image-banner.jsx";

export function Component({ props }) {
  const { bannerImage } = props;
  return bannerImage?.value ? <ImageBanner bannerImage={bannerImage} /> : null;
}

export const settings = {
  label: "Banner Image",
  props: [
    {
      id: "bannerImage",
      label: "Link of the Banner Image to set",
      type: "text",
      default: "",
    },
  ],
};
export default Component;

note

Ensure that the section file names (path: https://github.com/gofynd/Turbo/tree/main/theme/sections) follow the following naming rules:

• Use kebab-case (e.g., image-banner.jsx)
• Do not use underscores (_), dots (.), or special characters
• Avoid using the words "section" or "sections" in the filename