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

Question

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?

Answer 1

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.