1 | # webpack-analyze-duplication-plugin [![Latest version](https://badgen.net/npm/v/webpack-analyze-duplication-plugin)](https://npm.im/webpack-analyze-duplication-plugin) [![Monthly downloads](https://badgen.net/npm/dm/webpack-analyze-duplication-plugin)](https://npm.im/webpack-analyze-duplication-plugin) [![Install size](https://packagephobia.now.sh/badge?p=webpack-analyze-duplication-plugin)](https://packagephobia.now.sh/result?p=webpack-analyze-duplication-plugin)
|
2 |
|
3 | Detect duplicated modules in your Webpack build.
|
4 |
|
5 | Produce a `duplication-report.json` that contains a full-report on duplicated modules.
|
6 |
|
7 | Example snippet:
|
8 | ```json5
|
9 | {
|
10 | // The duplicated module path
|
11 | "/node_modules/vue/dist/vue.esm.js": {
|
12 |
|
13 | // Size of module
|
14 | "size": "326.4 kB",
|
15 |
|
16 | // Size savings if de-duped
|
17 | "size-impact": "979.2 kB",
|
18 |
|
19 | // Chunks the module is duplicated in
|
20 | "included-in": [
|
21 | ["index.js"],
|
22 | ["some-file.js"],
|
23 | ...
|
24 | ]
|
25 | },
|
26 |
|
27 | ...
|
28 | }
|
29 | ```
|
30 |
|
31 | <sub>If you like this project, please star it & [follow me](https://github.com/privatenumber) to see what other cool projects I'm working on! ❤️</sub>
|
32 |
|
33 | ## 🙋♂️ Why?
|
34 | Webpack configuration is complicated. It's easy to overlook misconfigurations and bloated distribution bundles.
|
35 |
|
36 | Use this plugin to make sure there are no duplicated modules, or that they're only duplicated where you want them to be.
|
37 |
|
38 | ## 🚀 Install
|
39 | ```sh
|
40 | npm i -D webpack-analyze-duplication-plugin
|
41 | ```
|
42 |
|
43 | ## 🚦 Quick Setup
|
44 | Add to your `webpack.config.js`:
|
45 |
|
46 | ```diff
|
47 | + const AnalyzeDuplicationPlugin = require('webpack-analyze-duplication-plugin')
|
48 |
|
49 | module.exports = {
|
50 | ...
|
51 |
|
52 | plugins: [
|
53 | + new AnalyzeDuplicationPlugin()
|
54 | ]
|
55 | }
|
56 | ```
|
57 |
|
58 | ## 👨👩👦👦 Related
|
59 |
|
60 | - [webpack-distsize](https://github.com/privatenumber/webpack-distsize) - Track Webpack output size via version control
|
61 | - [webpack-dependency-size](https://github.com/privatenumber/webpack-dependency-size) - Webpack plugin to get an overview of bundled dependencies and their size
|