如何加载ES6模块分别（根据需要）aka.摇树？

Question

现在我正在浏览我的应用程序，更改此模式的实例：

import {Grid, Row, Col} from 'react-bootstrap'

进入：

import {Grid, Row, Col} from '../react-bootstrap'

其中react-bootstrap.html" target="_blank">js是我项目根目录下的一个简单文件，有选择地从NPM包中导入我需要的ES6模块：

import Grid  from 'react-bootstrap/es/Grid'
import Col   from 'react-bootstrap/es/Col'
import Row   from 'react-bootstrap/es/Row'

export {Grid, Col, Row}

通过对许多包执行此操作，我能够将捆绑包文件大小减少50%以上。

有没有一个WebPack模块或插件可以自动为任何包做这件事？

如果这个转换（即，只在包中包含显式导入的内容，而不是整个库）递归地应用于整个包树，我打赌我们会看到显著的大小差异。

编辑：正如Swivel所指出的，这被称为树抖动，应该由Webpack 3自动执行，其中包含在我正在使用的反应脚本的生产配置中。

我不确定这是否是这两个项目中的一个错误，但是我看到通过手动进行选择性导入可以获得很大的收益，如果执行摇树，情况就不应该是这样。

Answer 1

无论是什么工具，都将等同于实现树摇动，并且它需要集成到您的bundler中。所以，没有。

为了记录在案，消除死代码与摇树并不是一回事。树抖动正在打破模块之间未使用的依赖关系。死代码消除在单个模块内。js一次只知道一个模块，所以它不能做树摇动：它只是消除死代码。因此，您使用的是UglifyJSPlugin，这一事实与您的构建环境是否存在树抖动无关。

Answer 2

我曾经搜索过这篇文章，找到了这篇文章。这很有帮助。我希望它对你有用。