How to use tree shaking for node modules with Webpack 5?

Question

I want to boost my website performance. I recently see an error on unused javascript from lighthouse.

I checked the bundle and apparently those unused javascript are actually being used from other modules and node packages which I have been download. For example, @sentry/node is what I'm using, but report shows unused javascript from @sentry/hub. But I only did install on @sentry/node but not the whole @sentry package. Further more, @sentry/node is using @sentry/hub, but I'm not importing @sentry/hub anywhere in my code (which I assume that causes the problem)

I have included "sideEffects": false to my package.json file but nothing seems to work

Answer 1

You could try destructuring, target only the object (or function) you are using.

e.g.

import { Component } from 'react';

Therefore, for you...

import { yourFunction } from `@sentry/node`;

Or simply take the code @sentry/node that you are using. ‍♂️

Otherwise, show your code:

• package.json
• webpack.config.js
• your "index" file (where you import your scripts and other files)
• the file you import @sentry/node in