Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Inline the webpack runtime chunk #5058

Merged
merged 1 commit into from
Sep 21, 2018
Merged

Inline the webpack runtime chunk #5058

merged 1 commit into from
Sep 21, 2018

Conversation

Timer
Copy link
Contributor

@Timer Timer commented Sep 21, 2018

This pull request introduces a new webpack plugin, InlineChunkHtmlPlugin.

InlineChunkHtmlPlugin taps into the new HtmlWebpackPlugin hook API and inlines any chunks matching (a) given regex expression(s).
It continues to delete the asset to prevent webpack from writing it to disk.

Motivation

The runtime chunk should be separated from the app and vendor bundles so neither get invalidated when only the other bundle changes.
Unfortunately, the runtime chunk is way too small to warrant an additional HTTP request.

The solution? Inline it into the HTML, i.e.

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
  <meta name="theme-color" content="#000000">
  <link rel="manifest" href="/manifest.json">
  <link rel="shortcut icon" href="/favicon.ico">
  <title>React App</title>
  <link href="/static/css/main.76932b00.chunk.css" rel="stylesheet">
</head>

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

</html>

tagged new feature for react-dev-utils and enhancement for react-scripts

@Timer Timer added this to the 2.0.0 milestone Sep 21, 2018
@Timer Timer merged this pull request into facebook:next Sep 21, 2018
@Timer Timer deleted the feature/inline-runtime-chunk branch September 21, 2018 18:19
Timer added a commit to Timer/create-react-app that referenced this pull request Sep 21, 2018
@Timer
Inline the webpack runtime chunk (facebook#5058)
e88809f
@Timer Timer mentioned this pull request Sep 22, 2018
Merged
zmitry pushed a commit to zmitry/create-react-app that referenced this pull request Sep 30, 2018
@Timer
Inline the webpack runtime chunk (facebook#5058)
5b62c2e
@lock lock bot locked and limited conversation to collaborators Jan 19, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers
No reviews
Assignees
No one assigned
Labels
CLA Signed tag: enhancement tag: new feature
Projects
None yet
Milestone
2.0
Development

Successfully merging this pull request may close these issues.
2 participants
@Timer @facebook-github-bot