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

小编典典

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

reactjs

运行后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>元素是我已提取到名为的文件的内联javascriptloader.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
root元素

我也尝试过在create-react-app repo上建议的此解决方案，该解决方案不起作用。没有产生错误，但没有呈现任何react元素（页面保持空白）

阅读 600

2020-07-22

共1个答案

小编典典

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

虽然我既不喜欢create-react-app也不将所有内容都捆绑到一个bundle.js文件中，但是您首先要弹出：yarn eject或者npm run eject-您可能可以使用一些第3方软件包来覆盖而不弹出，但是我将其留给您弄清楚。

然后，您需要转到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",和删除选项，将选项更改为仅输出单个CSS文件chunkFileName:。

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

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

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

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

2020-07-22