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.

Aluan Haddad · Answer 1 · 2018-12-01T22:35:53.897

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.

Thanks for a wonderful way of explanation, but is there anyway I build production bundle that used only libraries that codes which i used in my project.or any way can decrease my libs size ): — zulqarnain, Dec 01 '18 at 22:49
Glad I could be of service. Regarding the size of the bundle, your best bet is probably to split it up into multiple bundles. This won't make your apps smaller, but if it is structured in an amenable fashion, it well reduce startup time. But the problem is, when you say that you want to include only those libraries that you use in your project, is that it actually _is_ what is happening. The library is you're using are using those other libraries. — Aluan Haddad, Dec 01 '18 at 22:54

how to manage vendor libs in reactjs

1 Answers1