webpack-analyze-duplication-plugin

Detect duplicated modules in your Webpack build.

Produce a duplication-report.json that contains a full-report on duplicated modules.

Example snippet:

[
	{
		// The duplicated module path
		"module": "/node_modules/vue/dist/vue.esm.js",

		// Size of module
		"size": "326.4 kB",

		// Size savings if de-duped
		"potential-size-savings": "979.2 kB",

		// Chunks the module is duplicated in
		"included-in": [
			["index.js"],
			["some-file.js"],
			...
		],
	},

	...
]

_{If you like this project, please star it & follow me to see what other cool projects I'm working on! ❤️}

🙋‍♂️ Why?

Webpack configuration is complicated. It's easy to overlook misconfigurations and bloated distribution bundles.

Use this plugin to make sure there are no duplicated modules, or that they're only duplicated where you want them to be.

🚀 Install

npm i -D webpack-analyze-duplication-plugin

🚦 Quick Setup

Add to your webpack.config.js:

+ const AnalyzeDuplicationPlugin = require('webpack-analyze-duplication-plugin')

  module.exports = {
	  ...

      plugins: [
+         new AnalyzeDuplicationPlugin()
      ]
  }

👨‍👩‍👦‍👦 Related

• webpack-distsize - Track Webpack output size via version control
• webpack-dependency-size - Webpack plugin to get an overview of bundled dependencies and their size