-
Notifications
You must be signed in to change notification settings - Fork 7.4k
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.
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
Defer babel loading #100
Defer babel loading #100
Changes from 3 commits
1d48f75
80b1b83
7efe10f
b843de7
a02139b
36e1185
0a255fe
ba6a786
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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 {algoliaURL} 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(algoliaURL).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', | ||
}); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This will load the Algolia JS for every page. Even though the request will be cached, the browser might still end up wasting cycles processing/reprocessing the script. Also, ideally, if we're going to defer loading Algolia- we should defer loading it until the user actually starts to search (eg clicks to focus in the search bar). So maybe we could do this async step there instead? Happy to (a) talk more about this or (b) split that part off into a separate, follow-up issue or task. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Perhaps this should be a separate issue. |
||
}); | ||
} | ||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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); | ||
}); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. What are your thoughts about showing a loading placeholder in the 4 divs in question until Babel has finished loading? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It's a good idea, I can see that it is flashing once it loads. To fix this should I style the divs at content/index.md? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Probably not. (We actually need to clean up I would try maybe temporarily rendering a placeholder into the container from the Home template. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. So you mean that I should use There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Probably 😄 |
||
} | ||
|
||
render() { | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
/** | ||
* 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, | ||
}), | ||
), | ||
); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
These imports can be removed ^