CRA Webpack Dependency Optimization

Question

Does Create-React-App (or Webpack used by Create-React-App) at any stage (development, staging or production) optimise your node_modules? That is, if I had an import like this:

import _ from 'lodash'

and only use the map function in my project. Would my build bundle for production have all of lodash or would it strip out all other functions and keep the ones that are being referenced in my code?

score 1 · Accepted Answer · answered Mar 22 '18 at 16:08

1

CRA use UglifyJsPlugin in the webpack.config.prod.js which supports dead code removal.

But you should only import what you need for this to work: https://webpack.js.org/guides/tree-shaking/

answered Mar 22 '18 at 16:08

Gabriel Bleu

9,703
2
30
43

So if I import all of lodash then my bundle would not be optimized to only have what I need? Is that what you are saying? – Siya Mzam Mar 23 '18 at 08:35
Yes, and for loadash you might even need [babel-plugin-lodash](https://github.com/lodash/babel-plugin-lodash/blob/master/README.md) – Gabriel Bleu Mar 23 '18 at 08:52

score 0 · Answer 2 · answered Nov 25 '21 at 03:54

0

For anyone who stumbled here in 2021, create-react-app also do tree-shaking when you use import * as _ from 'lodash

answered Nov 25 '21 at 03:54

Trung The Celestial

1
1

CRA Webpack Dependency Optimization

2 Answers2

Linked