latentflip/webpack-unused

Check your frontend code for files/assets that are no longer used.

webpack-unused

Check your frontend code for files/assets that are no longer used.

Uses the output of webpack --json to see which files are actually used in your bundle, and lists files which haven't been required.

Usage:

# install webpack-unused
npm install -g webpack-unused

# run webpack using your normal webpack config etc
# with the --json switch to output the stats.json, and pipe to webpack-unused
# unused files in the cwd will be listed
webpack --json | webpack-unused

# if your source code is in a directory, like src/ pass that as a flag:
webpack --json | webpack-unused -s src

Notes/Caveats:

• this doesn't check for any unused npm modules etc that you have installed (node_modules is ignored)
• webpack-unused will detect non-js files that are required via loaders etc, however any requires that happen outside of webpack's knowledge may be incorrectly reported as unused, for example:
  • css-preprocessor imports, for example less's @import happens outside the webpack flow, so files which are only required via @import will report as unused, even if they are
• it looks like currently files that would appear in your output from using webpack's NormalModuleReplacementPlugin don't appear in webpack's --json output, and so will be incorrectly reported as unused, while the original may be incorrectly reported as used. issue #1
• ideally, you'll have all your frontend code in a src/ directory or similar so that you can use the -s flag, if not, any non-frontend code in cwd will be reported as unused

Related

• jspm-unused - Find unused files in a Jspm project

Contributing, etc

This is just a first stab, and I'm publishing it because I constantly look for/rewrite code to achieve this. PRs/Suggestions for improvements very welcome.

webpack-unused's Issues

Add an `ignore` option

This currently includes files like tests, snapshots, and storybook files - it'd be great if it could take a list of regexes to ignore (i'm happy to contribute if needed)

webpack --json doesn't correctly report modules replaced with NormalModuleReplacementPlugin

If a module is replaced in webpack.config.js with webpack's NormalModuleReplacementPlugin, the output from --json doesn't seem to know about it. This means that we'll report the original file as being used, and the replacement file as unused, incorrectly.

Join discussion of react-boilerpate

It would be great if you could join our discussion at react-boilerplate on 'Stripping/Detecting Unused Dependencies'. I seems really promising and I think react-boilerplate can benefit from it.

Here's the discussion

webpack --json doesn't correctly report modules concatenated with ModuleConcatenationPlugin()

Similar to #1, the issue here is on Webpack's side, but maybe worth documenting. ModuleConcatenationPlugin concatenates modules together and then generates a new identifier, which looks like: path/to/first/module.js + N modules, where N is the number of modules that were concatenated after the first, and because of that, webpack-unused can't see the full list of used files.

(Thank you for an incredibly useful tool! It worked really nicely out of the box in a large codebase, all I had to do was disable ModuleConcatenationPlugin temporarily)