reactjs - 使用 webpack 时使用 es6 命名导入是否会减少包大小

Question

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

import { render } from 'react-dom'

webpack 是否仅在包中包含渲染方法或整个模块尤其是在使用 tree shake 时，通过在 babel 配置中将 module 设置为 false 并让 webpack 处理它们？

同样在导入react的情况下

import React from 'react'

&&

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

什么是正确的方法？

Answer 1

Tree-Shaking 适用于可以静态分析的模块(无需运行代码即可获取整个依赖树) - 它仅适用于 ES2015 模块，不适用于 CommonJS(node) 模块。

截至撰写本文时 (react@15.4.x)，

react、react-dom 尚未作为 ES2015 模块发布。所以其中任何一个 -

import { render } from "react-dom";

或

import ReactDOM from "react-dom";

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