@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

Usage

webpack.config.js

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

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

API

LoadablePlugin

Create a webpack loadable plugin.

Arguments	Description
options	Optional options
options.filename	Stats filename (default to loadable-stats.json)
options.writeToDisk	Accepts boolean or object. Always write stats file to disk. Default to false.
options.writeToDisk.filename	Write assets to disk at given filename location

new LoadablePlugin({ filename: 'stats.json', writeToDisk: true })

Writing file to disk can be useful if you are using razzle or webpack-dev-server.

License

MIT

Changelog

5.4.0 (2019-01-17)

Features

• webpack-plugin: support custom path in writeToDisk option (#187) (4a6f84f)