How to find unused files in a Webpack project?

Question

I have a JavaScript project that is built with Webpack which I know has a lot of dead code files. How can I find source files that aren't used in the project?

Answer 1

There are a few plugins, but the UnusedFilesWebpackPlugin appears to be the most popular.

An example use is:

new UnusedFilesWebpackPlugin({
    failOnUnused: environment !== 'development',
    patterns: ['src/components/**/*.jsx', 'src/store/**/*.js', 'sass/**/*.scss'],
    ignore: ['**/LocalVideoDemo.jsx'],
  })

This will check for unused JSX files in the components directory, unused JS files in the Redux store directory and unused SCSS files. It will ignore whether or not the LocalVideoDemo.jsx file is included.

Answer 2

Tried using various webpack plugins, but ran into out of memory issues with each plugin. I think the easiest solution for a create-react-app bootstrapped application is to use ESLint.

Use the no-unused-modules which is now a part of eslint-plugin-import.

After setting up eslint, installing eslint-plugin-import, add the following to the rules:

"rules: {
  ...otherRules,
  "import/no-unused-modules": [1, {"unusedExports": true}]
}