webpack-common-shake

2.1.0 verified Sat Apr 25 auth: no javascript maintenance

Webpack plugin for tree-shaking CommonJS modules. Version 2.1.0 is the latest stable release, published in 2019. It removes unused assignments to exports properties, leaving dead code elimination to UglifyJS. Unlike ES module tree-shaking, this targets CommonJS exports. Works with Webpack 4+; for Webpack 3 use version 1.x. Provides options for warnings and bailout callbacks. Notable limitations: dynamic exports, dynamic require, and certain re-assignments cause bailouts.

Common errors

error Cannot find module 'webpack-common-shake' ↓

cause Package not installed or wrong import path.

fix

npm install webpack-common-shake --save-dev

error ShakePlugin is not a constructor ↓

cause Incorrect import: using default import instead of named export.

fix

const ShakePlugin = require('webpack-common-shake').Plugin;

error Module parse failed: Unexpected token (1:0) ↓

cause Webpack version incompatible (<4).

fix

Upgrade to Webpack 4+ or use webpack-common-shake@1.x.

error Bailout: dynamic require detected ↓

cause Dynamic require call in code.

fix

Remove dynamic require or use onGlobalBailout to handle.

Warnings

breaking Plugin must be used with Webpack 4+; Webpack 3 requires version 1.x. ↓

fix Use webpack-common-shake@1.x with Webpack 3, or upgrade to Webpack 4+.

gotcha Dynamic exports like exports[Math.random()] cause module bailout; tree-shaking disabled for that module. ↓

fix Avoid dynamic property access on exports. Use static export assignments.

gotcha Overriding required module variable (e.g., var a = require('./a'); a = require('./b')) causes bailout. ↓

fix Do not reassign variables that hold required modules.

gotcha Using require in non-standard ways (e.g., console.log(require('./lib'))) may cause bailout. ↓

fix Assign require result to a variable before using.

gotcha Dynamic import like require('./lib')[Math.random()] causes bailout. ↓

fix Use static import paths and access properties directly.

gotcha Dynamic require (e.g., require(Math.random())) causes global bailout; plugin disabled entirely. ↓

fix Avoid dynamic require expressions.

Install

npm install webpack-common-shake

yarn add webpack-common-shake

pnpm add webpack-common-shake

Imports

ShakePlugin

wrong

import { Plugin } from 'webpack-common-shake';

correct

const { ShakePlugin } = require('webpack-common-shake');

CommonJS module; does not support ESM imports. Use require or dynamic import().

Plugin

wrong

import ShakePlugin from 'webpack-common-shake';

correct

const ShakePlugin = require('webpack-common-shake').Plugin;

Named export, not default.

ShakePlugin

wrong

const { ShakePlugin } = require('webpack-common-shake');

correct

import { ShakePlugin } from 'webpack-common-shake';

Works in ESM context, but package is CJS; dynamic import also possible.

Quickstart

Basic Webpack 4+ configuration with ShakePlugin, including optional callbacks for export deletion and bailouts.

const ShakePlugin = require('webpack-common-shake').Plugin;

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  plugins: [
    new ShakePlugin({
      warnings: { global: true, module: false },
      onExportDelete: (resource, property) => {
        console.log(`Deleted ${property} from ${resource}`);
      },
      onModuleBailout: (module, bailouts) => {
        console.warn(`Bailout for ${module}: ${bailouts.join(', ')}`);
      },
      onGlobalBailout: (bailouts) => {
        console.warn(`Global bailout: ${bailouts.join(', ')}`);
      }
    })
  ]
};