How the plugin works

1. The plugin analyzes chunks and extracts libraries to separated chunks with disabled tree-shaking (or not?).

2. The plugin teaches entries and runtime to work with shared chunks.

How the app is loaded

1. Entry points and runtime are loaded.

2. Entry point checks if a shared required to run chunks are loaded and notifies the runtime about it.

3. Runtime downloads all not downloaded libraries and marks them as downloaded.

4. Runtime runs an app.

Tree shaking is dead-code elimination. Read more

Because the plugin doesn't know which the library part will use in another application, it disabled tree shaking. Therefore bundles become large.

For the solution, the plugin provides an usedExports option. It can be an array of import names to be used by another application. See the example in the demo.

Installation

The plugin can install by any package manager.

npm i @tinkoff/shared-library-webpack-plugin -D

or

yarn add @tinkoff/shared-library-webpack-plugin --dev

Configuration

Add plugin to webpack configuration file and set a list of libraries for sharing. There is an example with lodash:

import { SharedLibraryWebpackPlugin } from '@tinkoff/shared-library-webpack-plugin';

module.exports = {
  plugin: [
    new SharedLibraryWebpackPlugin({
      libs: 'lodash',
    }),
  ],
};

The plugin adds one more chunk with a hashed name to the bundle. It should be a shared lodash. When the application is loaded, the webpack runtime will check if lodash is loaded.

How does it work?

SharedLibraryWebpackPlugin

SharedLibraryWebpackPlugin is a class that implements webpack plugin functionality,

Options

libs

namespace

disableDefaultJsonpFunctionChange

SharedLibrarySearchConfig

SharedLibrarySearchConfig configures the search for sharing library and the formation of a chunk name.

pattern

name

chunkName

suffix

separator

deps

usedExports