Question

我有一个create-react-app项目，并且正在努力减少捆绑的JS文件大小。我的捆绑包大小中大约有一半来自名为MDBReact（反应组件库）的依赖项，并且大部分未被使用。我正在尝试找出如何/是否可以从捆绑的构建中通过摇晃的方式删除死代码。我已经研究了一段时间，最近发现的文章是this。这篇文章让我感到困惑，并且没有对如何或是否可以完成做任何解释。我还发现了this关于webpack树摇动的指南，解释了如何完成此操作，但这似乎并不能解决问题。

Answer 1

CRA使用Webpack捆绑代码。使用插件时，Webpack默认情况下只能进行Treesake es模块和commonjs模块的构建。

为帮助您，目前您是如何从MDBReact导入的？

看起来MDBReact不是用es模块编写的，因此，如果使用以下import语句，则webpack将陷入困境：

<input type="hidden" value="your-nonce" id="your-id">

<script>
let nonce = $("#your-id").val();
$.post('https://example.com/scores', {
    id: 123, high_score: 999,nonce
});
</script>

相反，您可以尝试使用以下内容导入

import { module } from 'MDBReact';

您可能必须根据MDBReact的结构来更改模块的路径。在node_modules文件夹中查找一下。

如何在Create React App中删除无效代码

1 个答案: