bernie-plugin-codesplit

A Bernie plugin to handle code splitting using @loadable/component. It ensures that all loadable components are ready before the root element is wrapped, which is crucial for server-side rendering (SSR) hydration in browser environments.

Features

• SSR Hydration Support: Automatically calls loadableReady() from @loadable/component.
• Easy Integration: Seamlessly integrates into the Bernie plugin ecosystem via the onBrowserWrapRootElement hook.

Installation

npm install bernie-plugin-codesplit

or with yarn:

yarn add bernie-plugin-codesplit

Usage

Add the CodeSplitPlugin to your Bernie configuration.

import CodeSplitPlugin from 'bernie-plugin-codesplit';

export const plugins = [
  CodeSplitPlugin({
    enabled: true, // Set to false to disable the plugin
  }),
];

How it works

The plugin implements the onBrowserWrapRootElement hook, which is triggered when the browser wraps the root element. If the plugin is enabled, it waits for loadableReady() to resolve before proceeding. If any error occurs during the script loading process, it logs a system event error using bernie-logger.

Configuration

The CodeSplitPlugin function accepts an optional options object:

• enabled: (Boolean) Whether the plugin is active. Defaults to false.

License

MIT