How to remove dead code in Create React App

Question

I have a create-react-app project, and I am working on reducing my bundled JS file size. About half of my bundle size is coming from a dependency called MDBReact (a react component library), and majority of it is not being used. I am trying to find out how/if I can remove dead code with tree shaking from the bundled build. I have been looking into this for a while and the closest article I found was this. This article leaves me confused and it does not give any explanation into how or if it can be done. I also found this guide on webpack tree shaking explaining how it can be done, but this does not seem to solve the problem.

Answer 1

CRA is using webpack to bundle code. Webpack can only treeshake es modules by default and commonjs modules when using plugins.

To help you on the way, how are you currently importing from MDBReact?

It looks like MDBReact is not written in es modules and webpack is therefore going to have a hard time tree shaking if you use the following import statement:

import { module } from 'MDBReact';

Instead you could try to import using the following

import modules from 'MDBReact/module';

You might have to change the path to the module depending on how MDBReact is structured. Take a look in the node_modules folder to find out.