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

ddrv8njm  于 2023-02-04  发布在  React
关注(0)|答案(3)|浏览(165)

这与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 repo上建议的这个解决方案,但不起作用。没有错误产生,也没有react元素呈现(页面保持空白)

polkgigr

polkgigr1#

简短

简而言之:这是可能的,但不太实际。为什么?随着单个捆绑文件的增长,您的应用程序将不再具有高性能。单个大型请求(而不是较小的请求)将不可避免地导致Web性能降低,并可能浪费带宽。
同样,我强烈建议不要将CRA用于您的单捆绑应用程序。虽然CRA是一个很好的样板文件,旨在提供一种DX友好的React with Webpack方法,但它确实包含许多依赖项,可能会不必要地与您的应用程序捆绑在一起。
因此,我强烈建议构建您自己的Webpack配置(在Webpack documentationCRA Webpack notes组合的帮助下相对简单),或者考虑rollupgulpmicrobundlebrowserify等替代配置。
以下程序将不可避免地随着CRA的更新而过时。因此,请自担风险使用这些说明。

程序

    • CRA版本:第4.0.3版**

您首先要弹出:yarn ejectnpm run eject--您可能可以使用一些第三方包来覆盖而不弹出,但我将让您自己来解决这个问题。
然后,您需要转到config/webpack.config.js文件并更改以下内容:

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

演示

注解

随着开发人员采用Webpack5,这种配置将不可避免地变得过时

p5cysglq

p5cysglq2#

Matt的解决方案是目前为止我得到的最接近的解决方案。经过几个小时的搜索,我找到了一种方法来强制Webpack输出一个js文件。只要把它放在这里以备将来参考,否则任何人都会遇到这个问题。

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

vmpqdwk33#

你可以做得更简单:
1.添加包yarn add react-app-rewired
1.更改package.json中的脚本部分

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

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

相关问题