How to remove unused modules in webpack?

Question

webpack

The essence of the problem is that the compiled file grows very large. Maybe someone knows if webpack has the ability to remove unused modules from the final file?

Answer 1

Webpack collects what you include. There are a couple of tips:
1. Connect carefully (for example, import _ from lodashuse instead of import func_name from lodash/func_name)
Developers try to optimize imports, so look for similar features in other libraries ( for example , ).
2. As you wrote in the question - remove unused code from the bundle (final script file). For example, uglifyJS can help with this. It should cut out everything unused. I won't give exact settings ( list ), but you can take a look at this question
3. Use a linter, for example eslint.org/. Run lint on the codebase and remove all unused (but included) modules.
ps While writing the answer to your question, I also came across webpack-bundle-size-analyzer . Haven't used it myself, but it might help.

Answer 2

Watch this video https://youtu.be/XY2NLKCrjJ4 , everything is explained in detail.
You can watch the entire screencast.