mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-16 02:27:21 +02:00
feat(v2): webpack prefetch for better UX (#1071)
* feat(v2): webpack prefetch for better UX * test snapshot update * nits
This commit is contained in:
parent
bbf355fdc7
commit
f84332d0a0
3 changed files with 23 additions and 7 deletions
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue