Delete Unused Code with Webpack and unused-files-webpack-plugin
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
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.
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!
Thanks Mike, Setting webpack configuration is very troublesome because you don't set it up every day and version 4 updating super fast.