how to manage vendor libs in reactjs

Question

in my react js app (using webpack), i used antd UI which added draft-js package in my project.but i don't know where i used draft.js
i have two questions.
1-how i know where i used draft-js.
2-draft.js increasing my bundle file size.i removed draft-js from my node_modules it showing me error "draft-js" not found.

package.json

"dependencies": {
    "antd": "^3.10.9",
    "axios": "^0.18.0",
    "bundle-loader": "^0.5.6",
    "express-static-gzip": "^1.1.3",
    "moment": "^2.22.1",
    "node-sass": "^4.7.2",
    "normalize.css": "7.0.0",
    "npm": "^6.1.0",
    "rc-time-picker": "^3.3.1",
    "react": "16.0.0",
    "react-dom": "16.0.0",
    "react-ga": "^2.5.3",
    "react-google-maps": "^9.4.5",
    "react-loadable": "^5.5.0",
    "react-redux": "^5.0.7",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "recompose": "^0.27.1",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0"
  },

and immutable.js install two times another thing is that after doing gzip also antd and @ant-designed libs increasing my bundle size.

so how can I solve these mess.

Answer 1

To answer your primary question, draft-js is a transitive dependency of your application. To determine where it is used, you need to look at the code (preferably the source) of the direct dependency which depends on it. In this case that would be antd@^3.10.9.

While there are specific exceptions, it is not in general possible to have a direct dependency without transitively depending on its dependencies.

To address the perceived issue of ImmutableJS being installed multiple times, at different versions, the same logic applies. When two or more of your dependencies have a transitive dependency on non-overlapping versions of the same package, you end up installing multiple versions of that package. Without this behavior, your dependencies could not be relied on to work.

In other words, consider incompatible versions of a single package as separate logical packages.

Having said that, it is possible, using certain tools such as RequireJS and SystemJS and others, to override transitive dependencies, for example forcing them to use a shared version of ImmutableJS. However, this approach, while powerful, must be employed with great care because they may indeed depend on Behavior specific to the version they originally specified.