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

  • Z时代
  • 2024-01-10
  • 分类：问答

运行后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元素（页面保持空白）

回答：

简而言之：

。为什么？您的应用程序将不再是渐进式的，单个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查看块分布图。

以上是 将react build输出合并到单个js文件中 的全部内容， 来源链接： utcz.com/qa/415679.html

回到顶部