node.js - 如何单独加载 ES6 模块(根据需要)又名。摇树？

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+ 使用 UglifyJSPlugin 自动执行，它包含在 production configuration from react-scripts 中我正在使用的。

我不确定这是否是这两个项目中的一个错误，但我通过手动进行选择性导入看到了巨大的 yield ，如果正在执行 Tree Shaking 则不会出现这种情况。

Answer 1

我曾经搜索过这个并找到了this文章。这非常有帮助。我希望它对你有用。