reactjs 为什么css-loader使我的入口点包膨胀?

wwtsj6pe  于 2022-12-12  发布在  React
关注(0)|答案(1)|浏览(125)

我正在清理一个旧的React项目,并试图通过实现代码拆分和分块来减少包的大小。我已经取得了相当大的进步,但我的应用程序的主要入口点仍然是大约600 kb。它似乎95%不是来自应用程序代码本身,而是我在webpack构建过程中使用的css-loader库。

这似乎是不正确的,但我不能弄清楚是什么我的webpack配置或包是导致这个特定的捆绑包膨胀。
以下是我的环境通用和生产Webpack配置信息:
第一个
有没有什么理由把css-loader单独捆绑到main bundle中呢?我如何让它停止或者调整它的大小到一个可管理的水平呢?

fnx2tebb

fnx2tebb1#

请注意,运行生产模式的webpack构建和将NODE_ENV设置为生产模式是两件不同的事情!如果不设置它,NODE_ENV最终将处于未定义状态,因此每次构建都使用样式加载器。
在使用当前代码运行构建之前,必须执行export NODE_ENV=production;
或者,您也可以像这样创建Webpack配置:

module.exports = (env, argv) => {
  if (argv.mode === 'development') {
     
  }

  if (argv.mode === 'production') {
    
  }

  return config;
};

通过这种方式,您可以从cli管理它,只需传递--mode=production--mode=development,而不是env变量,您可以依赖webpack的配置。

相关问题