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

IT技术 reactjs webpack create-react-app
2021-03-24 06:14:53

这与这个问题类似，但是这两个答案都不能解决问题。

运行后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 存储库中建议的这个解决方案不起作用。不产生错误但不呈现react元素（页面保持空白）

3个回答

简短的

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

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

因此，我强烈建议建立自己的WebPack配置（这是用的帮助相对简单的WebPack文档与联合CRA的WebPack票据）或考虑类似的替代品汇总，一饮而尽，微丛，或browserify仅举几例。

随着 CRA 的更新，以下程序不可避免地会过时。因此，使用这些说明的风险由您自己承担。

程序

CRA 版本：v4.0.3

您首先要弹出：yarn eject或者npm run eject- 您可能可以使用一些 3rd 方包来覆盖而不弹出，但我会让您自行解决。

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

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

演示

CRA 版本：v4.0.3（演示更新至 2021 年 5 月 25 日）

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

笔记

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

谢谢@MattCarlotta，可靠的答案。我已经试过了，除了一件事之外，它的效果很好。我只指定了一个 .js 文件，但我得到了两个：file.min.js和1.file.min.js.
2021-05-31 06:14:53
啊，很好，拼写错误......应该是optimization。更新了答案。
2021-06-12 06:14:53
不熟悉小部件。也就是说，如果您谈论的是包含 JS 和 CSS 的单个包文件，那么这是不可能的。JS 和 CSS 需要head在 React 组件中或在 React 组件中请求/导入。如果您正在寻找单个包文件，那么您会想要使用 CSS-in-JS 解决方案（例如styled-components，styled-jsx或react-jss仅举几例），该解决方案style在运行时将标签应用于类。此外，您可能需要考虑使用rollup.js而不是 Webpack，因为它更适合 NPM 库。
2021-06-12 06:14:53
这当然很重要 - 我这样做是为了制作一个可以轻松添加到 3rd 方网站的小部件。只是一些笔记；optimizations我的webpack.config.js（您的意思是optimization？）中没有任何部分（您是说吗？）但是我删除了专用splitChunks和runtimeChunk字段 - 有关差异，请参见此处diffchecker.com/7a1Hdg3a感谢您的帖子，这是一些 A+ 代码和说明
2021-06-15 06:14:53
如果我想将 CSS 和 JS 捆绑在一起（在 React 小部件上工作），我该怎么做？
2021-06-17 06:14:53

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

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

您可以更轻松地做到这一点：

  1. 添加包 yarn add react-app-rewired
  2. 更改脚本部分 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

其它你可能感兴趣的问题
上一篇React Native：使用 lodash 去抖动 下一篇create-react-app：如何使用 https 而不是 http？