这与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元素呈现(页面保持空白)
3条答案
按热度按时间polkgigr1#
简短
简而言之:这是可能的,但不太实际。为什么?随着单个捆绑文件的增长,您的应用程序将不再具有高性能。单个大型请求(而不是较小的请求)将不可避免地导致Web性能降低,并可能浪费带宽。
同样,我强烈建议不要将CRA用于您的单捆绑应用程序。虽然CRA是一个很好的样板文件,旨在提供一种DX友好的React with Webpack方法,但它确实包含许多依赖项,可能会不必要地与您的应用程序捆绑在一起。
因此,我强烈建议构建您自己的Webpack配置(在Webpack documentation与CRA Webpack notes组合的帮助下相对简单),或者考虑rollup、gulp、microbundle或browserify等替代配置。
以下程序将不可避免地随着CRA的更新而过时。因此,请自担风险使用这些说明。
程序
您首先要弹出:
yarn eject
或npm run eject
--您可能可以使用一些第三方包来覆盖而不弹出,但我将让您自己来解决这个问题。然后,您需要转到
config/webpack.config.js
文件并更改以下内容:isEnvProduction && shouldInlineRuntimeChunk && new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/])
,因为它在构建时会在index.html
文件内创建块文件列表filename: "static/css/bundle.min.css"
并删除chunkFileName选项,将MiniCssExtractPlugin选项更改为仅输出单个css文件。filename: "static/js/bundle.min.js"
,以输出到单个文件名用于生产。runtimeChunk: false
以避免创建runtime.chunk.js
文件new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 })
,以将输出的块限制为1演示
注解
随着开发人员采用Webpack5,这种配置将不可避免地变得过时
p5cysglq2#
Matt的解决方案是目前为止我得到的最接近的解决方案。经过几个小时的搜索,我找到了一种方法来强制Webpack输出一个js文件。只要把它放在这里以备将来参考,否则任何人都会遇到这个问题。
vmpqdwk33#
你可以做得更简单:
1.添加包
yarn add react-app-rewired
1.更改
package.json
中的脚本部分1.创建文件
config-overrides.js
从这里:https://github.com/facebook/create-react-app/issues/5306#issuecomment-431431877