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

Question

这与this 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 存储库中建议的 this solution，但它不起作用。没有产生错误但没有呈现任何反应元素（页面保持空白）

Answer 1

简介

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

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

因此，我强烈建议构建您自己的 Webpack 配置（在 Webpack documentation 和 CRA Webpack notes 的帮助下相对简单）或考虑像 rollup 这样的替代方案， gulp、microbundle 或 browserify 等等。

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

程序

CRA 版本：v4.0.3

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

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

• 从顶部导入中删除 InlineChunkHtmlPlugin 导入并在 plugins 下删除 isEnvProduction && shouldInlineRuntimeChunk && new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/])，因为它在构建时会在 index.html 文件中创建块文件列表
• 在 plugins 下，将 MiniCssExtractPlugin 选项更改为仅输出单个 css 文件，方法是将 filename 更改为 filename: "static/css/bundle.min.css" 并删除 chunkFileName 选项。
• 在 output 下，将 filename 更改为 filename: "static/js/bundle.min.js" 以输出为单个文件名以用于生产。
• 在 output 下，删除 chunkFilename 属性，因为您不再分块 JS 文件
• 在 optimization 下，移除 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

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

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

Answer 3

你可以做的更简单：

1. 添加包yarn add react-app-rewired
2. 更改package.json 中的脚本部分

"scripts": {
   "start": "react-app-rewired start",
   "build": "react-app-rewired build",
   "test": "react-app-rewired test",
   "eject": "react-scripts eject"
}

1. 创建文件config-overrides.js

module.exports = {
    webpack: function(config, env) {
        config.optimization.splitChunks = {
            cacheGroups: {
               default: false
            }
        };
        config.optimization.runtimeChunk = false;
        return config;
    }
}

从这里：https://github.com/facebook/create-react-app/issues/5306#issuecomment-431431877