React: can we impot only selected functionality from npm module while installing using webpack or somthing else?

Question

I tried the webpack basic setup from here:

https://webpack.js.org/guides/getting-started/

In this link I have used function of lodash npm module

_.join(['Hello', 'webpack'], ' ');

but there is many functions available in lodash module which I will never use.

Like wise, Material js, Bootstrap js etc.. We never use many function.

Because of that while creating build, the js file size would be big and the site will load slower.

So, can we install only selected functions with their dependency instead of full module installation?

Answer 1

If you are webpack4, they have implemented the tree shaking option, it means it will remove the code that you are not using from the library. Lodash is tree shakable, you can import your library like this

import { join } from 'lodash/join';

This will only import join from lodash. You can refer this doc for more information