Razzle plugin to add runtime and vendors chunks

Usage no npm install needed!

<script type="module">
  import razzlePluginLongTermCaching from 'https://cdn.skypack.dev/razzle-plugin-long-term-caching';


NPM version Build Status


This package contains a plugin for enabling long-term caching with Razzle

This plugin makes Webpack generate 3 chunks: runtime, vendors and client.

Don't forget to add REACT_BUNDLE_PATH=/static/js/vendors.js to .env or .env.development to get built-in error overlay.

Usage in Razzle Projects

yarn add razzle-plugin-long-term-caching

Using the plugin with the default options

// razzle.config.js

module.exports = {
  plugins: ['long-term-caching'],

With custom options:

// razzle.config.js

module.exports = {
  plugins: [
      name: 'long-term-caching',
      options: {
        runtimeChunk: 'single',


runtimeChunk: object string boolean (defaults: 'single')

Customize runtime chunk behaviour, this is directly provided to Webpack config

cachingOptions: boolean object string (defaults: false)

  • false: Use single vendors chunk.
  • true: Enable per-package vendor (node_modules) splitting for bigger initial download but smaller patches later on. This option works best with HTTP/2.
  • 'split-size': Use Webpack automatic size limiting options based on sizeOptions.
  • Object: Manually decide how vendor packages are split. Example structure { [chunkName]: Array | Regex }
  • Array: Manually decide how vendor packages are split. Example structure [ package names used splitting ]

vendorsChunkName: string (defaults: 'vendors')

sizeOptions: Object (defaults: { minSize: 30000, maxSize: 200000 })

Vendors chunk name.


MIT © Thorgate