如何最小化 React 应用程序的包大小？

Question

我正在使用 create-react-app 工具链开始。一切正常，但它的构建大小有点过头了。 在我的应用程序中，有 8 个组件和 2 个小上下文，总共 60kb。所以我的 src 文件夹中的所有代码都是 60kb。但是使用 npm run build 它会生成 900KB 的应用程序块。

然后我在 youtube 上看到了一个视频，该视频使用 webpack 配置将他的 700 kb 块减少到 100 kb。他没有过多地解释他的 webpack 配置。不过他说的是 react-scripts build 包含许多生产中不需要的调试工具。这个命令特别神奇

        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production'),
        }),

我已经尝试了几种方法来减少我的块的大小，比如使用 react.lazy() 进行代码拆分，但这也没有太大的区别。 有人可以使用上述命令为生产构建建议一个通用的 webpack 配置。

Answer 1

CRA 中包含的生产版本删除了那些额外的调试工具，并针对生产进行了优化。