使用Webpack时，使用es6命名导入是否会减少捆绑包的大小

Question

我需要了解何时使用这样的命名导入

import { render } from 'react-dom'

webpack是否仅在捆绑包中包含render方法或整个模块，特别是在通过 babel配置将模块设置为false 来使用摇树时，让webpack照顾它们吗？

同样在导入的情况下

import React from 'react'

&&

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

正确的方法是什么？

Answer 1

Tree-Shaking 适用于可以静态分析的模块（无需运行代码即可获取整个依赖树） - 它仅适用于 ES2015 模块而不适用于 CommonJS（节点）模块。

react, react-dom, 在撰写本文时 (react@15.4.x)，尚未作为 ES2015 模块发布。所以这些中的任何一个 -

import { render } from "react-dom";

或者

import ReactDOM from "react-dom";

将导致整个react-dom包含在您的捆绑包中。这同样适用于react作为 CommonJS 模块或 UMD 发布的其他库。