webpack-deep-scope-plugin

1.6.2 verified Sat Apr 25 auth: no javascript

A webpack plugin that improves tree-shaking by performing deep scope analysis to eliminate unused imports related to unused exports. Version 1.6.2 requires webpack ^4.14.0 and Node.js 8+. It solves webpack issue #6264 by analyzing variable scopes and removing dead code more aggressively than standard tree-shaking. Uses TypeScript and includes a custom version of escope. Alternative to webpack's built-in sideEffects flag but only works with ES module syntax (import/export).

Common errors

error TypeError: WebpackDeepScopeAnalysisPlugin is not a constructor ↓

cause Forgetting to use .default when requiring with CommonJS.

fix

Import via require('webpack-deep-scope-plugin').default

error Error: Module not found: Error: Can't resolve 'deep-scope-analyser' ↓

cause Missing dependency after npm install (peer dep not auto-installed).

fix

Run npm install deep-scope-analyser

error WARNING in ./node_modules/webpack-deep-scope-plugin/dist/index.js Critical dependency: the request of a dependency is an expression ↓

cause Plugin uses dynamic require patterns that webpack 4 warns about.

fix

Ignore the warning if tree-shaking works; or try using webpack 4.43+ which may reduce warnings.

Warnings

gotcha Plugin only works with import/export syntax, not CommonJS requires or transpiled to module.exports. ↓

fix Ensure your code uses ES modules; avoid Babel transforming to CommonJS unless targeting Node.

breaking Version 1.6.0 renamed the core package to deep-scope-analyser; API unchanged. ↓

fix Update references if directly using deep-scope-analyser; plugin API remains same.

gotcha Requires webpack ^4.14.0; not compatible with webpack 5. ↓

fix Use webpack 4.x or find alternative for webpack 5 (e.g., webpack's built-in sideEffects flag).

deprecated Plugin may not be actively maintained; last release 1.6.2 in 2019. ↓

fix Consider using webpack 5's built-in tree-shaking or sideEffects in package.json.

Install

npm install webpack-deep-scope-plugin

yarn add webpack-deep-scope-plugin

pnpm add webpack-deep-scope-plugin

Imports

WebpackDeepScopeAnalysisPlugin

wrong

const WebpackDeepScopeAnalysisPlugin = require('webpack-deep-scope-plugin')

correct

import WebpackDeepScopeAnalysisPlugin from 'webpack-deep-scope-plugin'

Default export; requires .default in CommonJS require.

default

wrong

const WebpackDeepScopeAnalysisPlugin = require('webpack-deep-scope-plugin')

correct

const WebpackDeepScopeAnalysisPlugin = require('webpack-deep-scope-plugin').default

CommonJS require must access .default property.

WebpackDeepScopeAnalysisPlugin

const { default: WebpackDeepScopeAnalysisPlugin } = require('webpack-deep-scope-plugin')

Destructured require also works.

Quickstart

Shows how to add the plugin to webpack config with CommonJS require and usedExports optimization.

// webpack.config.js
const WebpackDeepScopeAnalysisPlugin = require('webpack-deep-scope-plugin').default;

module.exports = {
  // ... other config
  optimization: {
    usedExports: true, // required for tree-shaking
  },
  plugins: [
    new WebpackDeepScopeAnalysisPlugin(),
  ],
};