我正在清理一个旧的React项目,并试图通过实现代码拆分和分块来减少包的大小。我已经取得了相当大的进步,但我的应用程序的主要入口点仍然是大约600 kb。它似乎95%不是来自应用程序代码本身,而是我在webpack构建过程中使用的css-loader
库。
这似乎是不正确的,但我不能弄清楚是什么我的webpack配置或包是导致这个特定的捆绑包膨胀。
以下是我的环境通用和生产Webpack配置信息:
第一个
有没有什么理由把css-loader单独捆绑到main bundle中呢?我如何让它停止或者调整它的大小到一个可管理的水平呢?
1条答案
按热度按时间fnx2tebb1#
请注意,运行生产模式的webpack构建和将NODE_ENV设置为生产模式是两件不同的事情!如果不设置它,NODE_ENV最终将处于未定义状态,因此每次构建都使用样式加载器。
在使用当前代码运行构建之前,必须执行
export NODE_ENV=production;
。或者,您也可以像这样创建Webpack配置:
通过这种方式,您可以从cli管理它,只需传递
--mode=production
或--mode=development
,而不是env变量,您可以依赖webpack的配置。