Deopts - what does it mean?

[budarin]

[smelukov]

deopt is deoptimization.
When webpack build a production bundle, it tries to optimize a bundle (concatenate modules, tree shake modules, and so on)
When webpack can't optimize a module it calls deoptimization. For example, webpack can't concatenate a module with the others if a module uses eval. Another example: webpack 4 can't do tree-shaking for non ES6 modules.
You can see a list of deoptimizations on the module detail page

[budarin]

Try to findout more about deopts:

ModuleConcatenation bailout: Cannot concat with ./src/common/utils/uuidv4.ts: Module ./src/common/services/api/clientApi.ts is referenced from these modules with unsupported syntax: ./src/common/services/api/index.ts (referenced with cjs full require)

what does it mean? these modules are written by me - how they have unsupported syntax?

Numbers are different in above picture:
at the root - +3 modules but in modules leaf - only 2
at the root 6 deopts but in the child tree only 3

is it ok?

[smelukov]

ModuleConcatenation bailout: Cannot concat with ./src/common/utils/uuidv4.ts: Module ./src/common/services/api/clientApi.ts is referenced from these modules with unsupported syntax: ./src/common/services/api/index.ts (referenced with cjs full require)

Seems like you are using "module": "CommonJS" in your tsconfig.json. Webpack can't apply module concatenation optimization for non-ES6 modules. Use "module": "ES6"

Numbers are different in above picture

In your case + 3 modules means that pages/Page1.tsx concatenates 3 modules. You can see these 3 modules inside the Concatenated leaf or on a module page.
Reasons -> Modules leaf is a list of the modules that require pages/Page1.tsx.

at the root 6 deopts but in the child tree only 3

The same. 6 deopts means that pages/Page1.tsx has 6 deoptimizations. You can see these deoptimizations on a module page.