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进行合并，尽管这不会产生任何错误，但未渲染react根元素

我还尝试了在create-react-app存储库上建议的this solution，该建议不起作用。没有产生错误，但没有呈现任何react元素（页面保持空白）

Answer 1

简而言之：可能，但不实用。为什么？您的应用程序将不再是渐进式的，单个js文件可能会变得非常大（性能降低，而webpack却没有提供任何代码拆分优势）。

虽然我既不喜欢create-react-app，也不喜欢将所有内容捆绑到一个bundle.js文件中，但是您首先要弹出：yarn eject或npm run eject-您可能可以使用一些第三者程序包来覆盖而不弹出，但是我将由您自己决定。

然后，您需要转到config/webpack.config.js并执行以下操作：

从所需的导入中删除InlineChunkHtmlPlugin，并在plugins:下删除isEnvProduction && shouldInlineRuntimeChunk && new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/])，因为它在构建时会在index.html文件内创建块文件列表
在output:下，将filename:更改为filename: "static/js/bundle.min.js",
在output:下，删除chunkFilename:属性，因为您在生产期间不再将js文件分块
在optimization:下，删除splitChunks:属性，因为您在构建时不再拆分块
在optimization:下，将runtimeChunk:设置为runtimeChunk: false，以避免在构建时创建runtime-chunk.js文件
在plugins:下，通过将MiniCssExtractPlugin更改为filename并删除filename: "static/css/main.min.css",，将chunkFileName:选项更改为仅输出单个CSS文件。

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

我还向仓库添加了两个package.json启动脚本：

1。）测试生产版本；在编译源代码之后，运行yarn prod或npm run prod 。

2。）要分析Webpack捆绑包，请运行yarn analyze或npm run analyze以查看块分布图。

Answer 2

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

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

Answer 3

你可以更轻松：

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

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

创建文件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

将react build输出合并到单个js文件中

3 个答案: