<p dir="auto">X-post from <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="113064352" data-permission-text="Title is private" data-url="https://github.com/webpack/webpack/issues/1544" data-hovercard-type="issue" data-hovercard-url="/webpack/webpack/issues/1544/hovercard" href="https://github.com/webpack/webpack/issues/1544">webpack/webpack#1544</a>:</p>
<p dir="auto">For example, if I have the js:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="    import React, {PropTypes} from &quot;react&quot;;

    import Branding from &quot;./Branding&quot;;

    const Layout = ({children, customSignIn}) =&gt; (
        &lt;div className=&quot;container&quot; style={{marginTop: 60}}&gt;
            &lt;div className=&quot;well&quot; style={{padding: 50}}&gt;

                &lt;div className=&quot;panel-body&quot;&gt;
                    &lt;div className=&quot;col-lg-6&quot; style={{textAlign: &quot;center&quot;}}&gt;
                        &lt;Branding customSignIn={customSignIn} /&gt;
                    &lt;/div&gt;
                    &lt;div className=&quot;col-lg-6&quot;&gt;
                        {children}
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    );

    Layout.propTypes = {
        children:     PropTypes.node,
        customSignIn: PropTypes.string,
    };

    export {Layout as default};"><pre class="notranslate">    <span class="pl-k">import</span> <span class="pl-v">React</span><span class="pl-kos">,</span> <span class="pl-kos">{</span><span class="pl-v">PropTypes</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"react"</span><span class="pl-kos">;</span>

    <span class="pl-k">import</span> <span class="pl-v">Branding</span> <span class="pl-k">from</span> <span class="pl-s">"./Branding"</span><span class="pl-kos">;</span>

    <span class="pl-k">const</span> <span class="pl-v">Layout</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">{</span>children<span class="pl-kos">,</span> customSignIn<span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"container"</span> <span class="pl-c1">style</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span><span class="pl-c1">marginTop</span>: <span class="pl-c1">60</span><span class="pl-kos">}</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"well"</span> <span class="pl-c1">style</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span><span class="pl-c1">padding</span>: <span class="pl-c1">50</span><span class="pl-kos">}</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>

                <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"panel-body"</span><span class="pl-c1">&gt;</span>
                    <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"col-lg-6"</span> <span class="pl-c1">style</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span><span class="pl-c1">textAlign</span>: <span class="pl-s">"center"</span><span class="pl-kos">}</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
                        <span class="pl-c1">&lt;</span><span class="pl-ent">Branding</span> <span class="pl-c1">customSignIn</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">customSignIn</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
                    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
                    <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"col-lg-6"</span><span class="pl-c1">&gt;</span>
                        <span class="pl-kos">{</span><span class="pl-s1">children</span><span class="pl-kos">}</span>
                    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
                <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-v">Layout</span><span class="pl-kos">.</span><span class="pl-c1">propTypes</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
        <span class="pl-c1">children</span>:     <span class="pl-v">PropTypes</span><span class="pl-kos">.</span><span class="pl-c1">node</span><span class="pl-kos">,</span>
        <span class="pl-c1">customSignIn</span>: <span class="pl-v">PropTypes</span><span class="pl-kos">.</span><span class="pl-c1">string</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">;</span>

    <span class="pl-k">export</span> <span class="pl-kos">{</span><span class="pl-v">Layout</span> <span class="pl-k">as</span> <span class="pl-s1">default</span><span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Webpack+babel produces:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="    &quot;use strict&quot;;

    Object.defineProperty(exports, &quot;__esModule&quot;, {
        value: true
    });

    function _interopRequireDefault(obj) { return obj &amp;&amp; obj.__esModule ? obj : { &quot;default&quot;: obj }; }

    var _react = __webpack_require__(3);

    var _react2 = _interopRequireDefault(_react);

    var _Branding = __webpack_require__(283);

    var _Branding2 = _interopRequireDefault(_Branding);

    var Layout = function Layout(_ref) {
        var children = _ref.children;
        var customSignIn = _ref.customSignIn;
        return _react2[&quot;default&quot;].createElement(
            &quot;div&quot;,
            { className: &quot;container&quot;, style: { marginTop: 60 } },
            _react2[&quot;default&quot;].createElement(
                &quot;div&quot;,
                { className: &quot;well&quot;, style: { padding: 50 } },
                _react2[&quot;default&quot;].createElement(
                    &quot;div&quot;,
                    { className: &quot;panel-body&quot; },
                    _react2[&quot;default&quot;].createElement(
                        &quot;div&quot;,
                        { className: &quot;col-lg-6&quot;, style: { textAlign: &quot;center&quot; } },
                        _react2[&quot;default&quot;].createElement(_Branding2[&quot;default&quot;], { customSignIn: customSignIn })
                    ),
                    _react2[&quot;default&quot;].createElement(
                        &quot;div&quot;,
                        { className: &quot;col-lg-6&quot; },
                        children
                    )
                )
            )
        );
    };

    Layout.propTypes = {
        children: _react.PropTypes.node,
        customSignIn: _react.PropTypes.string
    };

    exports[&quot;default&quot;] = Layout;
    module.exports = exports[&quot;default&quot;];"><pre class="notranslate">    <span class="pl-s">"use strict"</span><span class="pl-kos">;</span>

    <span class="pl-v">Object</span><span class="pl-kos">.</span><span class="pl-en">defineProperty</span><span class="pl-kos">(</span><span class="pl-s1">exports</span><span class="pl-kos">,</span> <span class="pl-s">"__esModule"</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
        <span class="pl-c1">value</span>: <span class="pl-c1">true</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-k">function</span> <span class="pl-en">_interopRequireDefault</span><span class="pl-kos">(</span><span class="pl-s1">obj</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-s1">obj</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">obj</span><span class="pl-kos">.</span><span class="pl-c1">__esModule</span> ? <span class="pl-s1">obj</span> : <span class="pl-kos">{</span> <span class="pl-s">"default"</span>: <span class="pl-s1">obj</span> <span class="pl-kos">}</span><span class="pl-kos">;</span> <span class="pl-kos">}</span>

    <span class="pl-k">var</span> <span class="pl-s1">_react</span> <span class="pl-c1">=</span> <span class="pl-en">__webpack_require__</span><span class="pl-kos">(</span><span class="pl-c1">3</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-k">var</span> <span class="pl-s1">_react2</span> <span class="pl-c1">=</span> <span class="pl-en">_interopRequireDefault</span><span class="pl-kos">(</span><span class="pl-s1">_react</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-k">var</span> <span class="pl-s1">_Branding</span> <span class="pl-c1">=</span> <span class="pl-en">__webpack_require__</span><span class="pl-kos">(</span><span class="pl-c1">283</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-k">var</span> <span class="pl-s1">_Branding2</span> <span class="pl-c1">=</span> <span class="pl-en">_interopRequireDefault</span><span class="pl-kos">(</span><span class="pl-s1">_Branding</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-k">var</span> <span class="pl-v">Layout</span> <span class="pl-c1">=</span> <span class="pl-k">function</span> <span class="pl-v">Layout</span><span class="pl-kos">(</span><span class="pl-s1">_ref</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">var</span> <span class="pl-s1">children</span> <span class="pl-c1">=</span> <span class="pl-s1">_ref</span><span class="pl-kos">.</span><span class="pl-c1">children</span><span class="pl-kos">;</span>
        <span class="pl-k">var</span> <span class="pl-s1">customSignIn</span> <span class="pl-c1">=</span> <span class="pl-s1">_ref</span><span class="pl-kos">.</span><span class="pl-c1">customSignIn</span><span class="pl-kos">;</span>
        <span class="pl-k">return</span> <span class="pl-s1">_react2</span><span class="pl-kos">[</span><span class="pl-s">"default"</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span>
            <span class="pl-s">"div"</span><span class="pl-kos">,</span>
            <span class="pl-kos">{</span> <span class="pl-c1">className</span>: <span class="pl-s">"container"</span><span class="pl-kos">,</span> <span class="pl-c1">style</span>: <span class="pl-kos">{</span> <span class="pl-c1">marginTop</span>: <span class="pl-c1">60</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
            <span class="pl-s1">_react2</span><span class="pl-kos">[</span><span class="pl-s">"default"</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span>
                <span class="pl-s">"div"</span><span class="pl-kos">,</span>
                <span class="pl-kos">{</span> <span class="pl-c1">className</span>: <span class="pl-s">"well"</span><span class="pl-kos">,</span> <span class="pl-c1">style</span>: <span class="pl-kos">{</span> <span class="pl-c1">padding</span>: <span class="pl-c1">50</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
                <span class="pl-s1">_react2</span><span class="pl-kos">[</span><span class="pl-s">"default"</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span>
                    <span class="pl-s">"div"</span><span class="pl-kos">,</span>
                    <span class="pl-kos">{</span> <span class="pl-c1">className</span>: <span class="pl-s">"panel-body"</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
                    <span class="pl-s1">_react2</span><span class="pl-kos">[</span><span class="pl-s">"default"</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span>
                        <span class="pl-s">"div"</span><span class="pl-kos">,</span>
                        <span class="pl-kos">{</span> <span class="pl-c1">className</span>: <span class="pl-s">"col-lg-6"</span><span class="pl-kos">,</span> <span class="pl-c1">style</span>: <span class="pl-kos">{</span> <span class="pl-c1">textAlign</span>: <span class="pl-s">"center"</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
                        <span class="pl-s1">_react2</span><span class="pl-kos">[</span><span class="pl-s">"default"</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-s1">_Branding2</span><span class="pl-kos">[</span><span class="pl-s">"default"</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">customSignIn</span>: <span class="pl-s1">customSignIn</span> <span class="pl-kos">}</span><span class="pl-kos">)</span>
                    <span class="pl-kos">)</span><span class="pl-kos">,</span>
                    <span class="pl-s1">_react2</span><span class="pl-kos">[</span><span class="pl-s">"default"</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span>
                        <span class="pl-s">"div"</span><span class="pl-kos">,</span>
                        <span class="pl-kos">{</span> <span class="pl-c1">className</span>: <span class="pl-s">"col-lg-6"</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
                        <span class="pl-s1">children</span>
                    <span class="pl-kos">)</span>
                <span class="pl-kos">)</span>
            <span class="pl-kos">)</span>
        <span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span><span class="pl-kos">;</span>

    <span class="pl-v">Layout</span><span class="pl-kos">.</span><span class="pl-c1">propTypes</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
        <span class="pl-c1">children</span>: <span class="pl-s1">_react</span><span class="pl-kos">.</span><span class="pl-c1">PropTypes</span><span class="pl-kos">.</span><span class="pl-c1">node</span><span class="pl-kos">,</span>
        <span class="pl-c1">customSignIn</span>: <span class="pl-s1">_react</span><span class="pl-kos">.</span><span class="pl-c1">PropTypes</span><span class="pl-kos">.</span><span class="pl-c1">string</span>
    <span class="pl-kos">}</span><span class="pl-kos">;</span>

    <span class="pl-s1">exports</span><span class="pl-kos">[</span><span class="pl-s">"default"</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-v">Layout</span><span class="pl-kos">;</span>
    <span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-s1">exports</span><span class="pl-kos">[</span><span class="pl-s">"default"</span><span class="pl-kos">]</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Notice all the instances of <code class="notranslate">_react2["default"]</code>... these don't minify well because the "default" is not minified. What would be better would be if webpack added a <code class="notranslate">var _reactDefault = _react2["default"];</code> declaration at the top and used that instead.</p>
<p dir="auto">Notice it also "inlined" my PropTypes definition and the usage became <code class="notranslate">_react.PropTypes</code>. Again, this is less minifiable than if it had generated <code class="notranslate">var _reactPropTypes = _react.PropTypes</code>.</p>
<p dir="auto">This pattern isn't specific to React, but React code certainly suffers greatly from it.</p>
<h3 dir="auto">tl;dr</h3>
<p dir="auto"><code class="notranslate">['default']</code> can be omit</p>
<h3 dir="auto">Details</h3>
<p dir="auto">When using an imported identifier the generated code is too verbose.<br>
e.g.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import Foo from 'foo'
const a = Foo.bar()"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">Foo</span> <span class="pl-k">from</span> <span class="pl-s">'foo'</span>
<span class="pl-k">const</span> <span class="pl-s1">a</span> <span class="pl-c1">=</span> <span class="pl-v">Foo</span><span class="pl-kos">.</span><span class="pl-en">bar</span><span class="pl-kos">(</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">produces:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var _Foo = require('foo');
var _Foo2 = _interopRequireWildcard(_Foo);
var a = _Foo2['default'].bar();"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-s1">_Foo</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'foo'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">_Foo2</span> <span class="pl-c1">=</span> <span class="pl-en">_interopRequireWildcard</span><span class="pl-kos">(</span><span class="pl-s1">_Foo</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">a</span> <span class="pl-c1">=</span> <span class="pl-s1">_Foo2</span><span class="pl-kos">[</span><span class="pl-s">'default'</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-en">bar</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">While the generated code is perfectly valid, when coupled with JSX it produces really long AST:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React from 'react'
const a = (
  &lt;div&gt;
    &lt;h1&gt;foo&lt;/h1&gt;
    &lt;p&gt;bar&lt;/p&gt;
  &lt;/div&gt;
)"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span>
<span class="pl-k">const</span> <span class="pl-s1">a</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">h1</span><span class="pl-c1">&gt;</span>foo<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">h1</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>bar<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
<span class="pl-kos">)</span></pre></div>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var _React = require('react');
var _React2 = _interopRequireWildcard(_React);
var a = _React2['default'].createElement(
  'div',
  null,
  _React2['default'].createElement(
    'h1',
    null,
    'foo'
  ),
  _React2['default'].createElement(
    'p',
    null,
    'bar'
  )
);"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-s1">_React</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'react'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">_React2</span> <span class="pl-c1">=</span> <span class="pl-en">_interopRequireWildcard</span><span class="pl-kos">(</span><span class="pl-s1">_React</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">a</span> <span class="pl-c1">=</span> <span class="pl-s1">_React2</span><span class="pl-kos">[</span><span class="pl-s">'default'</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span>
  <span class="pl-s">'div'</span><span class="pl-kos">,</span>
  <span class="pl-c1">null</span><span class="pl-kos">,</span>
  <span class="pl-s1">_React2</span><span class="pl-kos">[</span><span class="pl-s">'default'</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span>
    <span class="pl-s">'h1'</span><span class="pl-kos">,</span>
    <span class="pl-c1">null</span><span class="pl-kos">,</span>
    <span class="pl-s">'foo'</span>
  <span class="pl-kos">)</span><span class="pl-kos">,</span>
  <span class="pl-s1">_React2</span><span class="pl-kos">[</span><span class="pl-s">'default'</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span>
    <span class="pl-s">'p'</span><span class="pl-kos">,</span>
    <span class="pl-c1">null</span><span class="pl-kos">,</span>
    <span class="pl-s">'bar'</span>
  <span class="pl-kos">)</span>
<span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>