load babel only when needed

7 years ago · 1d48f7574e
5 changed files with 43 additions and 20 deletions
--- a/src/html.js
+++ b/src/html.js
@ -20,11 +20,6 @@ if (process.env.NODE_ENV === `production`) {
  }
 }

-const JS_NPM_URLS = [
-  '//unpkg.com/docsearch.js@2.4.1/dist/cdn/docsearch.min.js',
-  '//unpkg.com/babel-standalone@6.26.0/babel.min.js',
-];
-
 export default class HTML extends Component {
  render() {
    let css;
@ -37,8 +32,6 @@ export default class HTML extends Component {
      );
    }

-    const js = JS_NPM_URLS.map(url => <script key={url} src={url} />);
-
    return (
      <html lang="en">
        <head>
@ -50,7 +43,6 @@ export default class HTML extends Component {
          />
          <link rel="icon" href="/favicon.ico" />
          {this.props.headComponents}
-          {js}
          {css}
        </head>
        <body>
--- a/src/layouts/index.js
+++ b/src/layouts/index.js
@ -19,6 +19,8 @@ import Flex from 'components/Flex';
 import Footer from 'components/LayoutFooter';
 import Header from 'components/LayoutHeader';
 import {media} from 'theme';
+import loadScript from 'utils/loadScript';
+import {docsearchURL} from 'site-constants';

 // Import global styles
 import '../prism-styles';
@ -28,13 +30,15 @@ import 'css/algolia.css';

 class Template extends Component {
  componentDidMount() {
-    // Initialize Algolia search.
-    // TODO Is this expensive? Should it be deferred until a user is about to search?
-    // eslint-disable-next-line no-undef
-    docsearch({
-      apiKey: '36221914cce388c46d0420343e0bb32e',
-      indexName: 'react',
-      inputSelector: '#algolia-doc-search',
+    loadScript(docsearchURL).then(() => {
+      // Initialize Algolia search.
+      // TODO Is this expensive? Should it be deferred until a user is about to search?
+      // eslint-disable-next-line no-undef
+      docsearch({
+        apiKey: '36221914cce388c46d0420343e0bb32e',
+        indexName: 'react',
+        inputSelector: '#algolia-doc-search',
+      });
    });
  }

--- a/src/site-constants.js
+++ b/src/site-constants.js
@ -14,5 +14,7 @@
 // the SSR part in node.js we won't have a proper location.
 const urlRoot = 'https://reactjs.org';
 const version = '16.0.0';
+const babelURL = '//unpkg.com/babel-standalone@6.26.0/babel.min.js';
+const docsearchURL = '//unpkg.com/docsearch.js@2.4.1/dist/cdn/docsearch.min.js';

-export {urlRoot, version};
+export {urlRoot, version, babelURL, docsearchURL};
--- a/src/templates/home.js
+++ b/src/templates/home.js
@ -18,13 +18,17 @@ import React, {Component} from 'react';
 import TitleAndMetaTags from 'components/TitleAndMetaTags';
 import {colors, media, sharedStyles} from 'theme';
 import createOgUrl from 'utils/createOgUrl';
+import loadScript from 'utils/loadScript';
+import {babelURL} from 'site-constants';

 class Home extends Component {
  componentDidMount() {
-    mountCodeExample('helloExample', HELLO_COMPONENT);
-    mountCodeExample('timerExample', TIMER_COMPONENT);
-    mountCodeExample('todoExample', TODO_COMPONENT);
-    mountCodeExample('markdownExample', MARKDOWN_COMPONENT);
+    loadScript(babelURL).then(() => {
+      mountCodeExample('helloExample', HELLO_COMPONENT);
+      mountCodeExample('timerExample', TIMER_COMPONENT);
+      mountCodeExample('todoExample', TODO_COMPONENT);
+      mountCodeExample('markdownExample', MARKDOWN_COMPONENT);
+    })
  }

  render() {
--- a/src/utils/loadScript.js
+++ b/src/utils/loadScript.js
@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+export default url => new Promise((resolve, reject) =>
+  document.head.appendChild(
+    Object.assign(document.createElement('script'), {
+      async: true,
+      src: url,
+      onload: resolve,
+      onerror: reject
+    })
+  )
+);