Question

虽然我按照文档（请参阅here）中说明的步骤启用了Tree Shaking，但似乎没有任何效果。我Webpack 4使用ts-loader TypeScript。有问题的图书馆是material-ui。在他们的文档中（请参阅How to reduce the bundle size?），他们建议直接从material-ui/导入以避免引入未使用的模块＆＃34;然后他们添加＆＃34;两个选项都应该是临时的，直到你为项目添加树摇动功能。＆＃34;。所以我认为Tree Shaking应该有一些效果。

要明确：他们建议像这样导入：

import RaisedButton from "material-ui/RaisedButton";

而不是这样：

import {RaisedButton} from "material-ui";

我做了什么：

仅使用ES2015模块语法（即导入和导出）。
在我的项目"sideEffects":false文件中添加了package.json条目。并确保拼写正确。
在mode: "production"中运行Webpack，Webpack 4允许使用而不是UglifyJsPlugin（＆＃34;从webpack 4开始，这也很容易通过＆＃34;模式＆＃34;配置选项，设置为＆＃34;生产＆＃34;。＆＃34;）

结果：没什么。没有缩小尺寸。也许我做错了什么？

对于基准爱好者：就捆绑大小而言，这是一个RaisedButton成本。没有缩小（即生产模式）：

Initial (in mode "development"): 
1,63 MiB (No Material UI)

MuiThemeProvider
1,94 MiB -> +0,31 (`import {MuiThemeProvider} from "material-ui/styles";`)
1,92 MiB -> +0,29 (`import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';`)

RaisedButton
3,07 MiB -> +1,13 (`import {RaisedButton} from "material-ui";`)
2,03 MiB -> +0,09 (`import RaisedButton from "material-ui/RaisedButton";`)

缩小（无压缩）：

Initial (in mode "production"):
284 KiB (No Material UI)

MuiThemeProvider
371 KiB -> +087 (`import {MuiThemeProvider} from "material-ui/styles";`)
367 KiB -> +077 (`import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';`)

RaisedButton
705 KiB -> +338 (`import {RaisedButton} from "material-ui";`)
400 KiB -> +033 (`import RaisedButton from "material-ui/RaisedButton";`)

启用了Tree Shaking：

705 KiB (`import {RaisedButton} from "material-ui";`)
400 KiB (`import RaisedButton from "material-ui/RaisedButton";`)

I.e：完全没有效果。

Answer 1

正如@ qx3所写，我已经能够通过添加以下内容来获得它：

alias: { '@material-ui/core': '@material-ui/core/es' }

在我的webpack配置中。

注意'@'前缀和'/ core'后缀以适应库的新命名。这个简单的小事情帮助我摆脱了一些字节，并使团队能够以完全符合esm的方式编写“ @ material-ui / core”导入。

如何让Tree Shaking在Webpack 4中使用React Library＆＃34; material-ui＆＃34;？

1 个答案: