Question

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

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

成：

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

其中react-bootstrap.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 指出的那样，这被称为Tree Shaking，并且应该由Webpack 3+自动执行，其中包含production configuration from react-scripts中包含的UglifyJSPlugin我正在使用。

我不确定这是否是这两个项目中的错误，但我通过手动进行选择性导入看到了大尺寸的增加，如果正在执行Tree Shaking，情况应该不是这样。

Answer 1

我曾经搜索过此内容并找到this文章。这非常有帮助。我希望它适合你。

Answer 2

无论哪种工具都等同于实施摇树，并且需要将其集成到捆绑器中。所以，不。

为记录起见，清除死代码与摇树不是同一件事。摇树正在打破模块之间未使用的依赖关系。消除死代码在单个模块中。 Uglify.js一次只知道一个模块，因此它不能摇晃树：它只是执行死代码消除。因此，您正在使用UglifyJSPlugin的事实与您的构建环境是否摇晃无关。

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

2 个答案: