disable-tree-shaking-for-chunk-plugin

Disable Tree Shaking For Chunk Plugin

This plugin for Webpack 4 can disable tree shaking for all modules contained in a specific chunk. It is intended to help improve long-term caching and code reuse between project installations and builds.

Installation

This is a Node.js module available through the npm registry. Node 8 and Webpack 4.38 or higher are required.

Installation is done using the npm install command:

$ npm install --save-dev disable-tree-shaking-for-chunk-plugin

Once installed the plugin can be added to your Webpack plugins configuration:

const DisableTreeShakingForChunk = require('disable-tree-shaking-for-chunk-plugin')

module.exports = {
  //...
  plugins: [
    new DisableTreeShakingForChunk({
      test: 'chunk-name'
    })
  ]
}

Options

test (string, RegExp, Function, Array, Set)

Matches the chunk name. It may be a string matched with strict equality, a regular expression for more complex string matching, a function which will receive the chunk name as an argument and should return a boolean, or an array or set of strings.

Example

Below demonstrates part of a Webpack configuration file which sets up code splitting for a project. It has two groups defined, one using an array of package names and another with a regular expression.

An instance of this plugin is created for each group with the test parameter configured to match all of the generated chunks.

const DisableTreeShakingForChunk = require('disable-tree-shaking-for-chunk-plugin')

const commonLibraries = ['react', 'redux', 'regenerator-runtime']

const designSystemComponent = /node_modules\/@organisation\/component-/

module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        commonLibraries: {
          test(module) {
            const packageName = getPackageName(module.context)
            return packageName ? commonLibraries.includes(packageName) : false
          },
          name(module) {
            return getPackageName(module.context)
          }
        },
        designSystemComponents: {
          test(module) {
            return designSystemComponent.test(module.context)
          },
          name(module) {
            const packageName = getPackageName(module.context)
            return packageName.replace('@', '').replace('/', '--')
          }
        }
      }
    }
  },
  plugins: [
    new DisableTreeShakingForChunk({
      test: commonLibraries
    }),
    new DisableTreeShakingForChunk({
      test: /^organisation--component-/
    })
  ]
}

Prior Art

This plugin is based upon Webpack's internal FlagInitialModulesAsUsedPlugin by Tobias Koppers.

Development

This project uses Prettier for automatic code formatting and is tested with Jasmine.

License

This package is MIT licensed.