Delete Unused Code with Webpack and unused-files-webpack-plugin

InstructorMike Sherov

Share this video with your friends

Send Tweet

As you refactor and modify applications, it's difficult to manage and keep track of files as they become unused. Keeping this "dead" code around adds noise to your application and reduces clarity. Just as ESLint can tell us when variables become unused, Webpack (with the help of the unused-files-webpack-plugin) can tell us when entire files become unused. First, we'll install the plugin with npm and save it as a devDependency. Next, we'll use npm run scripts to build a new command that will run Webpack with the plugin. Finally, we'll learn how to use Webpack environment variables to conditionally add plugins to your Webpack config. By the end of the lesson, you'll have a useful cli command you can run to check for unused modules in your Webpack build

Free Community Resource

A Community Resource means that it’s free to access for all. The instructor of this lesson requested it to be open to the public.

Doma
Doma
~ 2 years ago

Hi Mike, first of all, thanks for making such a useful lesson! you did a great job indeed. I'd like to know what's different usage ofusing TerserPlugin and unused-files-webpack-plugin?

Thanks.

Mike Sherov
Mike Sherov(instructor)
~ 2 years ago

Hi Darren,

Thanks! You should be using both together! TerserPlugin will minify your code.... that is, it’ll take your code and rewrite it to the same thing but in a smaller way. This will happen at build time and you should use it when you deploy to production. Your end users get minified code, but your source files stay unminified for development.

With unused-files-webpack-plugin, it’s purpose is to be run during development, to tell you if any of your code is no longer being used. If it reports anything, you can safely delete that file, and that’ll reduce the maintenance burden of the code overall.

That is to say: Terser is for sending smaller payloads to your users, UnusedFiles is for deleting unneeded code from your source files.

Hope that helps!

Doma
Doma
~ 2 years ago

Thanks Mike, Setting webpack configuration is very troublesome because you don't set it up every day and version 4 updating super fast.