删除未使用的导入是否会影响 Reactjs 中的包大小和构建时间答案

【问题标题】：Does removing unused imports have an impact on bundle size and build time in Reactjs删除未使用的导入是否会影响 Reactjs 中的包大小和构建时间
【发布时间】：2018-07-14 23:01:02
【问题描述】：

我有一个使用 Create React 应用程序创建的 Reactjs 应用程序，它在启动和构建时会发出很多警告，指出我的组件中有未使用的变量或导入。

./src/components/home/Header.js
    Line 10:   'Switch' is defined but never used  no-unused-vars
    Line 10:   'Route' is defined but never used   no-unused-vars

拥有no-unused-vars 是否会对应用程序的最终包大小和构建时间产生相当大的影响。我可以通过删除所有这些警告来减少构建时间和包大小吗？

【问题讨论】：

是的，删除这些会减小大小，但不会太多。如果你真的想减小尺寸，你需要做 uglify。
感谢您的回复@ShubhamBatra。我认为 Create React 应用程序自带 uglify 开箱即用。我一直在寻找优化构建大小和时间的方法。
是的，uglify 是开箱即用的，但它将我的应用程序大小从 11.1 mb 减少到 1.89 mb。你应该看到这个答案stackoverflow.com/questions/34239731/…

标签： node.js reactjs npm webpack create-react-app

【解决方案1】：

签出这个包https://www.npmjs.com/package/source-map-explorer。并运行

source-map-explorer bundle.js

它将为您提供捆绑文件的详细屏幕截图，例如哪个软件包占用了太多文件大小等等。更改How to minimize the size of webpack's bundle? 中提到的导入包的方式，如果某些特定包导致大小问题，请切换到替代包。

【讨论】：