CommonJs modules aren't tree-shaked by default.

siarheiyelin
2023-03-07T06:15:19Z

### Describe the bug
"commonJs" dependencies aren't tree-shakeable with CRA out of the box.

### Root cause:
The default settings of TerserPlugin in Webpack library includes "passes: 2" option. The entire Terser config looks like this:
```
new TerserPlugin({
terserOptions: {
compress: {
passes: 2
}
}
})
```
It was added in scope of "commonJs"[ tree-shaking implementation](https://github.com/webpack/webpack/pull/11336/files#diff-c0078e4713a0e7a24dbc56d6dfda3cf139376325fc65ea70a8389d4d30b27f04): . As a result, any "commonJs" dependencies (which imported from "node_modules") are tree-shaked successfully using default settings of Webpack OOTB.

However, the Webpack config in Create React App doesn't include "passes" option (i.e. it's implicitly equal to 1). As a result, "commonJs" modules are not tree-shaked when code is built using CRA.

### Environment
Version of CRA: create-react-app: 5.0.1
System:
OS: Windows 10 10.0.19045
CPU: (8) x64 Intel(R) Core(TM) i7-10610U CPU @ 1.80GHz
Binaries:
Node: 18.13.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
npm: 8.19.3 - C:\Program Files\nodejs\npm.CMD

### Steps to reproduce

Prerequisites:
```npx create-react-app treeshaking-issue-demo```
Steps:
1. Install some deps.
```
npm i -D source-map-explorer
npm i -D @epam/uui-core@4.10.1-beta.1
```

2. Go to "src/index.js" and add next couple of lines:
```
import { useForceUpdate } from '@epam/uui-core';
console.log(useForceUpdate);
```

3. Build with default settings of CRA. And check bundle content.
```
npm run build
npx source-map-explorer 'build/**/*.js'
```

4. Build with "passes: 2"
Go directly to node_modules, edit next file: node_modules/react-scripts/config/webpack.config.js - add ```"passes": 2``` option to the "terserOptions.compress". So that it looks like:
```
new TerserPlugin({
terserOptions: {
parse: {
// We want terser to parse ecma 8 code. However, we don't want it
// to apply any minification steps that turns valid ecma 5 code
// into invalid ecma 5 code. This is why the 'compress' and 'output'
// sections only apply transformations that are ecma 5 safe
// https://github.com/facebook/create-react-app/pull/4234
ecma: 8,
},
compress: {
passes: 2, /// <----- HERE
```

Build and check bundle content

```
npm run build
npx source-map-explorer 'build/**/*.js'
```

5. Compare bundles from step 3 and step 4
If you compare bundle from step 3 and bundle from step 4, you could notice that only small part of "@epam/uui-core" library was actually added to the bundle if "passes: 2" option is specified.

![image](/uploads/bad87f9d265c6f78ec5477b1e1b861c0/223122754-38300358-7b1f-4bdf-9d33-280c1c48f1e6.png)

### Expected behavior

I would expect that default settings of CRA support tree shaking of "CommonJs" modules out of the box. More specifically: it makes sense to add "passes: 2" option mentioned above to the default Webpack config of CRA.

### Actual behavior

"CommonJs" modules aren't tree shaked out of the box, and I have to use some tools (like CRACO https://craco.js.org/) in order to override default settings and add ```"passes": 2``` option to the Terser plugin options.