将react build输出合并到单个js文件中 [英] combine react build output into single js file

问题描述

这类似于此问题，但是

运行 npm run build 后，生成的索引.html 看起来类似于：

After running npm run build the resultant index.html looks similar to:

<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> 元素是我已提取到名为 loader.js

The first <script> element is inlined javascript that i have extracted to a file called 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文件，但这在引用单个文件时导致错误：

I've tried filesmerge.com to combine the JS files but this results in an error when referencing the single file:

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

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

I then tried combining using jscompress.com and whilst this does not produce any errors the react root element is not rendered

我也尝试过此解决方案在无法正常使用的create-react-app存储库中建议。不会产生错误，但不会呈现任何react元素（页面保持空白）

I've also tried this solution suggested on the create-react-app repo which does not work. No error is produced but no react element is rendered (page remains blank)

推荐答案

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

In short: It's possible, but not practical. Why? Your app will no longer be progressive and your single js file can be very large (slower performance all around with none of the code splitting benefits webpack offers).

虽然我不是粉丝 create-react-app 或将所有内容捆绑到一个 bundle.js 文件中，您首先要弹出：纱线弹出或 npm运行弹出-您可能可以使用某些第三方软件包来覆盖而不弹出，但是我

While I'm not a fan of the create-react-app nor bundling everything into one bundle.js file, you'll first want to eject: yarn eject or npm run eject -- you can probably use some 3rd party packages to override without ejecting, but I'll leave that up to you to figure out.

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

Then, you'll need to go to the config/webpack.config.js and do the following:

• 从必需的进口中且 InlineChunkHtmlPlugin >插件：，删除 isEnvProduction&&应该是InlineRuntimeChunk&&新的InlineChunkHtmlPlugin（HtmlWebpackPlugin，[/ runtime-。+ [。] js /]），因为它在 index.html 内创建了一个块文件列表构建文件时


• 在输出下：下，将文件名：更改为文件名： static / js / bundle.min.js，


• 在下，输出：，请删除 chunkFilename：属性，因为您不再在生产过程中对js文件进行分块


• 在优化：，删除 splitChunks：属性，因为构建时不再拆分块


• 优化：，将 runtimeChunk：设置为 runtimeChunk：false 避免在构建时创建一个runtime-chunk.js文件


• 在插件下：，更改 MiniCssExtractPlugin 选项，通过将 filename 更改为 filename： static / css / bundle.min.css，仅输出单个CSS文件， 并删除 chunkFileName：。

• Remove InlineChunkHtmlPlugin from required imports and under plugins: , remove isEnvProduction && shouldInlineRuntimeChunk && new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]) as it creates a chunk file list inside the index.html file when building
• Under output: , change filename: to filename: "static/js/bundle.min.js",
• Under output: , remove the chunkFilename: property as you're no longer chunking js files during production
• Under optimization: , remove splitChunks: property as you're no longer splitting chunks when building
• Under optimization: , set runtimeChunk: to runtimeChunk: false to avoid creating a runtime-chunk.js file when building
• Under plugins: , change MiniCssExtractPlugin options to only output a single css file by changing filename to filename: "static/css/bundle.min.css", and removing chunkFileName:.

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

我也在回购中添加了两个 package.json 启动脚本：

I also added two package.json start scripts to the repo:

1。）测试生产版本；

1.) To test the production build; run yarn prod or npm run prod after compiling your source.

2。）要分析Webpack捆绑包，请运行 yarn analysis 或 npm run analytics 进行查看大块分布图。

2.) To analyze a webpack bundle, run yarn analyze or npm run analyze to view a chunk distribution chart.

这篇关于将react build输出合并到单个js文件中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！