Reputation: 576
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
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