个人中心
gpt4 book ai didi

javascript - webpack (react-scripts) index.html 中的 JS 在做什么？

转载 作者：行者123 更新时间：2023-11-30 19:13:34 25 4
gpt4 key购买 nike

我正在尝试将 React 组件动态加载到另一个应用程序(也是一个简单的 React 应用程序)中，但无法运行 index.js。

我有点偏向 this文章，但这实际上不是问题所在。

我偶然发现这样一个事实，即生成到 index.html 的生成的巨大 JS 函数不知何故是我的 index.js 被调用的入口点. 

<!doctype html>
<html lang="en">

<head>
  <!-- head stuff here -->
</head>

<body><noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <!-- this is the function I am talking about -->
  <script>!function (c) { function e(e) { for (var r, t, n = e[0], o = e[1], u = e[2], a = 0, l = []; a < n.length; a++)t = n[a], Object.prototype.hasOwnProperty.call(i, t) && i[t] && l.push(i[t][0]), i[t] = 0; for (r in o) Object.prototype.hasOwnProperty.call(o, r) && (c[r] = o[r]); for (s && s(e); l.length;)l.shift()(); return p.push.apply(p, u || []), f() } function f() { for (var e, r = 0; r < p.length; r++) { for (var t = p[r], n = !0, o = 1; o < t.length; o++) { var u = t[o]; 0 !== i[u] && (n = !1) } n && (p.splice(r--, 1), e = a(a.s = t[0])) } return e } var t = {}, i = { 1: 0 }, p = []; function a(e) { if (t[e]) return t[e].exports; var r = t[e] = { i: e, l: !1, exports: {} }; return c[e].call(r.exports, r, r.exports, a), r.l = !0, r.exports } a.m = c, a.c = t, a.d = function (e, r, t) { a.o(e, r) || Object.defineProperty(e, r, { enumerable: !0, get: t }) }, a.r = function (e) { "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e, "__esModule", { value: !0 }) }, a.t = function (r, e) { if (1 & e && (r = a(r)), 8 & e) return r; if (4 & e && "object" == typeof r && r && r.__esModule) return r; var t = Object.create(null); if (a.r(t), Object.defineProperty(t, "default", { enumerable: !0, value: r }), 2 & e && "string" != typeof r) for (var n in r) a.d(t, n, function (e) { return r[e] }.bind(null, n)); return t }, a.n = function (e) { var r = e && e.__esModule ? function () { return e.default } : function () { return e }; return a.d(r, "a", r), r }, a.o = function (e, r) { return Object.prototype.hasOwnProperty.call(e, r) }, a.p = "/search/"; var r = window.webpackJsonpsearch = window.webpackJsonpsearch || [], n = r.push.bind(r); r.push = e, r = r.slice(); for (var o = 0; o < r.length; o++)e(r[o]); var s = n; f() }([])</script>
  <script src="/search/static/js/2.360c2576.chunk.js"></script>
  <script src="/search/static/js/main.f6fe58e3.chunk.js"></script>
</body>

</html>

目前我只包括 main.js，这就是我的原型(prototype)不起作用的原因，所以我想了解 index.html 在导入系统中重新创建它实际上做了什么.

我无法找到关于此 javascript 实际执行的操作的任何文档。任何人都可以帮我找到一些关于此功能正在做什么的提示吗？

该项目是一个简单的create-react-app 应用程序。没有做进一步的配置，但是在 package.json 中设置了“主页”属性。

最佳答案

找到了答案。其实this post让我进入正确的方向。

该函数是内联运行时 block ，以节省一些网络流量。有一个实际的 Webpack 插件可以通过 env-variable 像这样设置 

INLINE_RUNTIME_CHUNK=false

Source

这是由于报告 issue 而实现的.

reacts webpack.config.js 的代码如下:

      // Inlines the webpack runtime script. This script is too small to warrant
      // a network request.
      // https://github.com/facebook/create-react-app/issues/5358
      isEnvProduction &&
        shouldInlineRuntimeChunk &&
        new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]),

关于javascript - webpack (react-scripts) index.html 中的 JS 在做什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58233054/

25 4 0
文章推荐： javascript - 如何从拉取的 mongodb 文档中添加字段
文章推荐： javascript - 我想将此 Flatlist react native 代码转换为类文件
文章推荐： javascript - 自动化 VBA 加载 IE 并在登录屏幕上输入凭据
文章推荐： c# - 等同于 C# 中的 $_FILES
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com