feat(v2): webpack prefetch for better UX (#1071)

* feat(v2): webpack prefetch for better UX

* test snapshot update

* nits
This commit is contained in:
Endilie Yacop Sucipto 2018-10-27 13:48:10 +08:00 committed by GitHub
parent bbf355fdc7
commit f84332d0a0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 7 deletions

View file

@ -7,6 +7,7 @@ exports[`server utils autoprefix css 1`] = `
* This source code is licensed under the MIT license found in the * This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree. * LICENSE file in the root directory of this source tree.
*/ */
.hljs { .hljs {
margin-left: -15px; margin-left: -15px;
margin-right: -15px; margin-right: -15px;

View file

@ -17,7 +17,9 @@ async function genRoutesConfig({
path: ${JSON.stringify(permalink)}, path: ${JSON.stringify(permalink)},
exact: true, exact: true,
component: Loadable({ component: Loadable({
loader: () => import(${JSON.stringify(source)}), loader: () => import(/* webpackPrefetch: true */ ${JSON.stringify(
source,
)}),
loading: Loading, loading: Loading,
render(loaded, props) { render(loaded, props) {
let Content = loaded.default; let Content = loaded.default;
@ -38,7 +40,9 @@ async function genRoutesConfig({
path: ${JSON.stringify(permalink)}, path: ${JSON.stringify(permalink)},
exact: true, exact: true,
component: Loadable({ component: Loadable({
loader: () => import(${JSON.stringify(source)}), loader: () => import(/* webpackPrefetch: true */ ${JSON.stringify(
source,
)}),
loading: Loading, loading: Loading,
render(loaded, props) { render(loaded, props) {
let Content = loaded.default; let Content = loaded.default;
@ -63,7 +67,12 @@ async function genRoutesConfig({
component: Loadable.Map({ component: Loadable.Map({
loader: { loader: {
${posts ${posts
.map((p, i) => `post${i}: () => import(${JSON.stringify(p.source)})`) .map(
(p, i) =>
`post${i}: () => import(/* webpackPrefetch: true */ ${JSON.stringify(
p.source,
)})`,
)
.join(',\n\t\t\t\t')} .join(',\n\t\t\t\t')}
}, },
loading: Loading, loading: Loading,
@ -86,7 +95,9 @@ async function genRoutesConfig({
path: ${JSON.stringify(permalink)}, path: ${JSON.stringify(permalink)},
exact: true, exact: true,
component: Loadable({ component: Loadable({
loader: () => import(${JSON.stringify(source)}), loader: () => import(/* webpackPrefetch: true */ ${JSON.stringify(
source,
)}),
loading: Loading, loading: Loading,
render(loaded, props) { render(loaded, props) {
let MarkdownContent = loaded.default; let MarkdownContent = loaded.default;

View file

@ -116,13 +116,17 @@ export default class Home extends React.Component {
} }
componentDidMount() { componentDidMount() {
window.setInterval(() => { this.interval = setInterval(() => {
this.setState(prevState => ({ this.setState(prevState => ({
featureIndex: (prevState.featureIndex + 1) % FEATURES.length, featureIndex: (prevState.featureIndex + 1) % FEATURES.length,
})); }));
}, 3000); }, 3000);
} }
componentWillUnmount() {
clearInterval(this.interval);
}
render() { render() {
return ( return (
<div> <div>
@ -205,8 +209,8 @@ export default class Home extends React.Component {
)}> )}>
<div className={styles.sectionInner}> <div className={styles.sectionInner}>
<div className={styles.row}> <div className={styles.row}>
{QUOTES.map(quote => ( {QUOTES.map((quote, index) => (
<div className={styles.column}> <div key={index} className={styles.column}>
<img <img
className={styles.quoteThumbnail} className={styles.quoteThumbnail}
src={quote.thumbnail} src={quote.thumbnail}