SharedLibraryWebpackPlugin

SharedLibraryWebpackPlugin is a class that implements webpack plugin functionality,

Options

libs

new SharedLibraryWebpackPlugin({
    libs: 'lodash'
});

new SharedLibraryWebpackPlugin({
    libs: '@angular/**'
});

new SharedLibraryWebpackPlugin({
    libs: ['@angular/**', 'zone.js/dist/zone']
});

new SharedLibraryWebpackPlugin({
   libs: {name: '@angular/core', chunkName: 'ng', separator: '@'}
});

namespace

{
    namespace: "__shared_libraries__"
}

disableDefaultJsonpFunctionChange

{
    disableDefaultJsonpFunctionChange: false
}

SharedLibrarySearchConfig

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

pattern

{
    pattern: "@angular/**"
}

name

{
    name: "@angular/core"
}

chunkName

{
    chunkName: "ng"
}

suffix

{
    suffix: 'suffix'
}

separator

{
    separator: "@"
}

deps

new SharedLibraryWebpackPlugin({
   libs: [
      '@angular/**', 
      {name: '@tinkoff/angular-ui', deps: ['@angular/core']}
   ]
})

usedExports

{name: '@angular/core', usedExports: ['DomSanitizer']}

Tree shaking is dead-code elimination.

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 .

How the plugin works

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

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.

Installation

The plugin can install by any package manager.

or

Configuration

Add plugin to webpack configuration file and set a list of libraries for sharing. There is an example with 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.