@loadable/webpack-plugin

What is @loadable/webpack-plugin?

@loadable/webpack-plugin is a plugin for Webpack that works in conjunction with @loadable/component to enable code-splitting and dynamic imports in React applications. It helps in generating a stats file that is used to load only the necessary chunks for a given page, improving the performance and load times of web applications.

What are @loadable/webpack-plugin's main functionalities?

Code Splitting

This feature allows you to split your code into smaller chunks that can be loaded on demand. The LoadablePlugin generates a stats file that helps in loading only the necessary chunks for a given page.

const LoadablePlugin = require('@loadable/webpack-plugin');

module.exports = {
  plugins: [
    new LoadablePlugin()
  ]
};

Dynamic Imports

This feature allows you to dynamically import components in your React application. The @loadable/component library works with @loadable/webpack-plugin to ensure that only the necessary chunks are loaded.

import loadable from '@loadable/component';

const MyComponent = loadable(() => import('./MyComponent'));

function App() {
  return (
    <div>
      <MyComponent />
    </div>
  );
}

Server-Side Rendering (SSR) Support

This feature provides support for server-side rendering by using the ChunkExtractor to collect and render the necessary chunks on the server.

import { ChunkExtractor } from '@loadable/server';
import stats from './dist/loadable-stats.json';

const extractor = new ChunkExtractor({ statsFile: stats });
const jsx = extractor.collectChunks(<App />);

const html = renderToString(jsx);

Other packages similar to @loadable/webpack-plugin

react-loadable

react-loadable is a higher-order component for loading components with dynamic imports. It provides similar functionality to @loadable/component but does not have built-in support for Webpack plugins like @loadable/webpack-plugin.

webpack-bundle-analyzer

webpack-bundle-analyzer is a plugin and CLI utility that represents bundle content as a convenient interactive zoomable treemap. While it does not provide code-splitting or dynamic import functionalities, it helps in analyzing the size and composition of Webpack bundles.

react-async-component

react-async-component is another library for code-splitting and loading React components asynchronously. It provides similar functionality to @loadable/component but does not have the same level of integration with Webpack.

README

@loadable/webpack-plugin

This plugin is required only if you use Server Side Rendering in your application. See @loadable/server for more information.

Install

npm install --save-dev @loadable/webpack-plugin

Documentation

👉 See full documentation

License

MIT

Changelog

5.15.2 (2021-12-12)

Bug Fixes

• Clear correct cache when compiling with Webpack (#838) (3b9cb20)
• loadAsync Loadable should copy statics (#839) (9ff6693)
• use stable promises for load/preload/React (#858) (45f2d91)