如何单独加载ES6模块（根据需要）又名。 树在摇晃吗？

现在我正在通过我的应用程序，改变这种模式的实例：

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

成：

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

其中react-bootstrap.js是一个简单的文件在我的项目的根目录，有select地导入我需要从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} 

这样做的一些包，我可以减less我的包文件大小超过50％。

有没有一个WebPack模块或插件可以自动执行任何包？

如果这个转换（也就是只在包中包含明确导入的内容，而不是整个库）recursion地应用于整个包树，我敢打赌，我们会看到显着的尺寸差异。

---

编辑：正如Swivel指出的那样，这被称为Tree Shaking ，并且应该由Webpack 3+自动执行，UglifyJSPlugin包含在我正在使用的react-scripts的生产configuration中 。

我不确定这是否是这两个项目中的一个bug，但是通过手动进行select性导入，我看到了很大的收益，如果正在执行Tree Shaking，情况就不是这样。

Answer 1

我曾经search这个，发现这篇文章。 这是非常有帮助的。 我希望这个对你有用。