create-react-app React-Scripts 5.0.0构建不拆分生成的JavaScript捆绑包

bnlyeluc 于 6个月前发布在 React

关注(0)|答案(6)|浏览(88)

描述问题

在将 react-scripts 包从 4.0.3 升级到 5.0.0 后，react-scripts build 命令只生成一个 JavaScript 文件，而之前有 3 个文件。由于这个原因，生成的 .js.map 文件对于我们来说太大，无法进行版本控制。

你是否尝试恢复依赖项？

我在源代码仓库的不同副本中并行运行了这些命令，并确认 RS 5.0.0 代码没有产生与 4.0.3 可比的结果。在这两个树中，我都是在所有依赖项的干净重新安装(删除了 node_modules 并重新运行了 yarn install)的情况下运行的。

在用户指南中你搜索了哪些术语？

我搜索了“代码拆分”，并阅读了有关它的部分。它暗示代码拆分是基于动态导入(我们没有使用),但应用程序代码本身并没有改变(只有构建工具)。

环境

Environment Info:

  current version of create-react-app: 5.0.0
  running from /home/rjray/.npm/_npx/20562/lib/node_modules/create-react-app

  System:
    OS: Linux 4.15 Ubuntu 16.04.7 LTS (Xenial Xerus)
    CPU: (12) x64 Intel(R) Core(TM) i7-5820K CPU @ 3.30GHz
  Binaries:
    Node: 14.18.3 - /home/linuxbrew/.linuxbrew/opt/node@14/bin/node
    Yarn: 1.22.0 - /home/linuxbrew/.linuxbrew/bin/yarn
    npm: 6.14.15 - /home/linuxbrew/.linuxbrew/opt/node@14/bin/npm
  Browsers:
    Chrome: 96.0.4664.93
    Firefox: 88.0
  npmPackages:
    react: ^16.14.0 => 16.14.0 
    react-dom: ^16.14.0 => 16.14.0 
    react-scripts: ^5.0.0 => 5.0.0 
  npmGlobalPackages:
    create-react-app: Not Found

重现问题的步骤

我不确定如何描述重现问题的过程，也无法分享项目的 package.json 文件，因为它是一个内部公司项目。

预期行为

我期望它的行为与 4.0.3 工具链完全相同。

实际行为

当我在具有版本 4.0.3 的仓库上运行 react-scripts build 时，生成的 build/static/js 目录看起来像这样：

$ ls -lG build/static/js
total 7400
-rw-r--r-- 1 rjray 1289088 Jan 19 09:11 2.1e43ba39.chunk.js
-rw-r--r-- 1 rjray    3423 Jan 19 09:11 2.1e43ba39.chunk.js.LICENSE.txt
-rw-r--r-- 1 rjray 5081380 Jan 19 09:11 2.1e43ba39.chunk.js.map
-rw-r--r-- 1 rjray  314529 Jan 19 09:11 main.38d92359.chunk.js
-rw-r--r-- 1 rjray  868002 Jan 19 09:11 main.38d92359.chunk.js.map
-rw-r--r-- 1 rjray    1559 Jan 19 09:11 runtime-main.5f8120df.js
-rw-r--r-- 1 rjray    8278 Jan 19 09:11 runtime-main.5f8120df.js.map

当我使用 5.0.0 工具链运行该仓库时，生成的目录看起来像这样：

$ ls -lG build/static/js
total 6836
-rw-r--r-- 1 rjray 1484759 Jan 19 10:47 main.7f057cb8.js
-rw-r--r-- 1 rjray    2160 Jan 19 10:47 main.7f057cb8.js.LICENSE.txt
-rw-r--r-- 1 rjray 5508473 Jan 19 10:47 main.7f057cb8.js.map

create-react-app

来源：https://github.com/facebook/create-react-app/issues/11963

6条答案

按热度按时间

ycggw6v21#

这个问题似乎已经被#11763解决了。

赞(0）回复(0）举报 6个月前

mcdcgff02#

嘿，@rjray,显然#11763还没有被合并。所以这个问题还没有解决。你能请重新打开它吗？非常感谢。

赞(0）回复(0）举报 6个月前

jv4diomz3#

引用的解决方案(#11763)尚未合并，因此重新打开此问题。我们不得不使用此发行版的修补版本进行构建。

赞(0）回复(0）举报 6个月前

ig9co6j14#

如果这对任何人有帮助，我目前正在使用 react-app-rewired 来覆盖Webpack配置。如果你的项目中还没有使用 react-app-rewired(我已经使用了),那么它可能不值得一试。但是你的 config-overrides.js 文件可以像下面这样实现 #11763 中提出的更改：

module.exports = function override(config, webpackEnv) {
  config.optimization.splitChunks =
    webpackEnv === "development"
      ? undefined
      : {
          chunks: "all",
        };

  return config;
};

赞(0）回复(0）举报 6个月前

jrcvhitl5#

在webpack仓库中是否有关于此问题的指定问题？或者webpack团队有任何回应吗？
我想上面的一个解决方案不会是永久性的。

赞(0）回复(0）举报 6个月前

xzabzqsa6#

我遇到了一个相反的问题，在5.0.1版本中，我的程序包含了很多代码块，但是我无法删除它们。

赞(0）回复(0）举报 6个月前