reactjs - 将 React 构建输出合并到单个 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 进行组合虽然这不会产生任何错误，但 react 根元素不会呈现

我也尝试过this solution在 create-react-app 存储库上建议，但不起作用。没有产生错误，但没有渲染任何反应元素(页面保持空白)

Answer 1

简介

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

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

因此，我强烈建议构建您自己的 Webpack 配置(在 Webpack documentation 与 CRA Webpack notes 结合的帮助下相对简单)或考虑像 rollup 这样的替代方案。 , gulp , microbundle ，或browserify仅举几例。

随着 CRA 的更新，下面的过程将不可避免地变得过时。因此，使用这些说明的风险由您自行承担。

程序

CRA 版本:v4.0.3

您首先要弹出:yarnject或npm runject——您可能可以使用一些第3方包来覆盖而不弹出，但我会把这个问题留给你自己去解决。

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

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

演示

CRA 版本:v4.0.3(演示更新于 2021 年 5 月 25 日)

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

注释

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