CODEWITHSUNDEEP
reactjswebpackbabeljs
zied hajsalah
zied hajsalah

Reputation: 576

Does the use of es6 named imports reduce the bundle size when using webpack

I need to understand when I use a named import like this

import { render } from 'react-dom'

does webpack include in the bundle only the render method or the whole module especially when using tree shaking by setting module to false in babel configuration and let webpack take care about them?

Also in the case of importing react

import React from 'react'

&&

import React, { Component, PropTypes } from 'react'

what's the right way?

Upvotes: 7

Views: 1507

Answers (1)

Boopathi Rajaa
Boopathi Rajaa

Reputation: 4729

Tree-Shaking is applicable for modules which can be statically analysed (to get the entire dependency tree without running the code) - and it is ONLY for ES2015 Modules and NOT CommonJS(node) modules.

react, react-dom, as of this writing ([email protected]), are NOT published as ES2015 modules. So either of these -

import { render } from "react-dom";

or

import ReactDOM from "react-dom";

will result in the entire react-dom being included in your bundle. The same applies for react and other libraries which are published as CommonJS modules or UMD.

Upvotes: 5

Related Questions