将反应构建输出合并到单个 js 文件中

Question

这与这个问题类似，但是这两个答案都不能解决问题。

运行后npm run build的结果index.html类似于：

<script>!function (i) { function e(e) { for //rest omitted
<script src="/static/js/2.3f294f32.chunk.js"></script>
<script src="/static/js/main.7b9daa35.chunk.js"></script>

第一个<script>元素是内联的 javascript，我已将其提取到一个名为的文件中loader.js

<script src="/loader.js"></script>
<script src="/static/js/2.3f294f32.chunk.js"></script>
<script src="/static/js/main.7b9daa35.chunk.js"></script>

这有效，但我想将所有 3 个文件合并为一个文件

我已经尝试过filesmerge.com来合并 JS 文件，但这会导致在引用单个文件时出错：

output.min.js:1 Uncaught TypeError: (intermediate value)(...) is not a function
at output.min.js:1

然后我尝试使用jscompress.com 进行组合，虽然这不会产生任何错误，但不会呈现反应根元素

我也试过在 create-react-app 存储库中建议的这个解决方案不起作用。不产生错误但不呈现反应元素（页面保持空白）

Answer 1

简短的

简而言之：这是可能的，但不是很实用。为什么？随着单个捆绑文件的增长，您的应用程序将不再具有性能。单个大请求，而不是较小的请求，将不可避免地导致 Web 性能变慢并可能浪费带宽。

同样，我强烈建议不要将 CRA 用于您的单捆绑应用程序。虽然 CRA 是一个很棒的样板，它面向 DX 友好的 React with Webpack 方法，但它确实包含许多可能不必要地与您的应用程序捆绑在一起的依赖项。

因此，我强烈建议建立自己的WebPack配置（这是用的帮助相对简单的WebPack文档与联合CRA的WebPack票据）或考虑类似的替代品汇总，一饮而尽，微丛，或browserify仅举几例。

随着 CRA 的更新，以下程序不可避免地会过时。因此，使用这些说明的风险由您自己承担。

程序

CRA 版本：v4.0.3

您首先要弹出：yarn eject或者npm run eject- 您可能可以使用一些 3rd 方包来覆盖而不弹出，但我会让您自行解决。

然后，您需要转到该config/webpack.config.js文件并更改以下内容：

• 从顶部导入和插件下删除InlineChunkHtmlPlugin导入，删除因为它在构建时在文件内创建块文件列表isEnvProduction && shouldInlineRuntimeChunk && new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/])index.html
• 在plugins 下，通过将文件名更改为并删除chunkFileName选项，将MiniCssExtractPlugin选项更改为仅输出单个 css 文件。filename: "static/css/bundle.min.css"
• 在 输出，更改文件名来filename: "static/js/bundle.min.js"输出到用于生产单一的文件名。
• 在output 下，删除chunkFilename属性，因为您不再分块 JS 文件
• 在优化下，删除splitChunks属性，因为您不再拆分 JS 块
• 在优化下，将runtimeChunk设置runtimeChunk: false为避免创建runtime.chunk.js文件
• 在优化下，在TerserPlugin 之后，添加new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 })以将输出的块限制为 1

演示

CRA 版本：v4.0.3（演示更新至 2021 年 5 月 25 日）

工作仓库：https : //github.com/mattcarlotta/cra-single-bundle

笔记

随着开发世界采用 Webpack 5，此配置将不可避免地过时

Answer 2

马特的解决方案是我目前得到的最接近的解决方案。经过几个小时的搜索，我找到了一种强制Webpack输出一个js文件的方法。只需将其放在这里以供将来参考，否则任何人都会遇到此问题。

plugins: [
      isEnvProduction &&
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 1
      }),
...
]