Skip to content

emmiep/rollup-plugin-split-bundle

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

@emmiep/rollup-plugin-split-bundle

Experimental Rollup plugin to split the code into separate bundles, for instance to create a "vendor bundle" with external npm packages. This is not code splitting for asynchronous loading with dynamic imports, such as using webpack and and import(). Use on your own risk, not tested and not recommended for production code!

Usage

Installation:

npm install @emmiep/rollup-plugin-split-bundle

The plugin requires two rollup configurations, one for the main bundle (the "consumer" side) and one for the split bundle (the "producer" side).

First, use the consumer() plugin in the main bundle configuration (rollup.main.js):

import splitBundle from '@emmiep/rollup-plugin-split-bundle';

export default {
  input: 'src/index.js'
  output: {
    file: 'dist/app.js'
    format: 'umd',
    name: 'app'
  },
  plugins: [
    splitBundle.consumer({
      name: '__vendor',
      modules: [
        'react',
        'react-dom'
      ]
    })
  ]
};

Then, use producerFromConfig() in the split bundle configuration (rollup.vendor.js) with the main bundle configuration:

import splitBundle from '@emmiep/rollup-plugin-split-bundle';
import mainConfig from './rollup.main';

export default {
  output: {
    file: 'dist/vendor.js'
    format: 'umd',
    name: 'vendor'
  },
  plugins: [
    splitBundle.producerFromConfig(mainConfig)
  ]
};

Then invoke rollup with both configuration files:

rollup -c rollup.main.js
rollup -c rollup.vendor.js

Background

The idea behind the plugin is straightforward and can easily be done manually as well.

The consumer prevents the listed modules from being included in bundle by declaring them as external, and map their module IDs to properties on a global variable (e.g. window.__vendor) using output.globals. The name of the global variable is set by the name plugin option.

On the other hand, the producer simply sets output.name to the same name as the global variable, and replaces the entrypoint with a script re-exporting the modules so the main bundle can access them:

export {default as React} from 'react';
export {default as ReactDom} from 'react-dom';

About

Experimental Rollup bundle splitting

Resources

License

Stars

Watchers

Forks

Packages

No packages published