load babel only when needed

renanpvaz · renanpvaz · commit 1d48f7574e35 · 2017-10-09T13:12:33.000-03:00
diff --git 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>
diff --git 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',
+      });
     });
   }
 
diff --git 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};
diff --git 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() {
diff --git 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
+    })
+  )
+);
