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

user_7361279 0
Viewed 721

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

tree-shaking webpack reactjs node.js javascript
1 Answers

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
user_79334430
Related