3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-02 03:37:48 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor(v2): better page preloading (#976)

Browse source 
* refactor: use native preloadReady for prerender on client

* refactor: rename 'prerender' to 'preload' for correctness
This commit is contained in:
Endilie Yacop Sucipto 2018-09-22 00:42:06 +08:00 • committed by GitHub
parent fbdd79981d
commit ce5610a420
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 9 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
package.json
View file

@ -5,6 +5,8 @@
"url": "https://github.com/facebook/Docusaurus.git" "url": "https://github.com/facebook/Docusaurus.git"
}, },
"scripts": { "scripts": {
"lint:v1": "cd v1 && yarn lint",
"lint:v2": "cd v2 && yarn lint",
"precommit": "lint-staged", "precommit": "lint-staged",
"prettier": "prettier --config .prettierrc --write \"**/*.js\"", "prettier": "prettier --config .prettierrc --write \"**/*.js\"",
"prettier:diff": "prettier --config .prettierrc --list-different \"**/*.js\"", "prettier:diff": "prettier --config .prettierrc --list-different \"**/*.js\"",
@ -17,7 +19,7 @@
}, },
"lint-staged": { "lint-staged": {
"linters": { "linters": {
"{v1,v2}/**/*.js": ["yarn lint --fix", "yarn prettier", "git add"] "{v1,v2}/**/*.js": ["yarn lint:v1 --fix", "yarn lint:v2 --fix", "yarn prettier", "git add"]
} }
} }
} }

7
v2/lib/core/clientEntry.js
View file

@ -1,14 +1,13 @@
import React from 'react'; import React from 'react';
import Loadable from 'react-loadable';
import {BrowserRouter} from 'react-router-dom'; import {BrowserRouter} from 'react-router-dom';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import App from './App'; import App from './App';
import prerender from './prerender';
import routes from '@generated/routes'; // eslint-disable-line
// Client side render (e.g: running in browser) to become single-page application (SPA) // Client side render (e.g: running in browser) to become single-page application (SPA)
if (typeof window !== 'undefined' && typeof document !== 'undefined') { if (typeof document !== 'undefined') {
prerender(routes, window.location.pathname).then(() => { Loadable.preloadReady().then(() => {
ReactDOM.render( ReactDOM.render(
<BrowserRouter> <BrowserRouter>
<App /> <App />

2
v2/lib/core/prerender.js → v2/lib/core/preload.js
View file

@ -4,7 +4,7 @@ import {matchRoutes} from 'react-router-config';
* This helps us to make sure all the async component for that particular route * This helps us to make sure all the async component for that particular route
* is loaded before rendering. This is to avoid loading screens on first page load * is loaded before rendering. This is to avoid loading screens on first page load
*/ */
export default function prerender(routeConfig, providedLocation) { export default function preload(routeConfig, providedLocation) {
const matches = matchRoutes(routeConfig, providedLocation); const matches = matchRoutes(routeConfig, providedLocation);
return Promise.all( return Promise.all(
matches.map(match => { matches.map(match => {

4
v2/lib/core/serverEntry.js
View file

@ -4,13 +4,13 @@ import ReactDOMServer from 'react-dom/server';
import Helmet from 'react-helmet'; import Helmet from 'react-helmet';
import App from './App'; import App from './App';
import prerender from './prerender'; import preload from './preload';
import routes from '@generated/routes'; // eslint-disable-line import routes from '@generated/routes'; // eslint-disable-line
import webpackClientStats from '@build/client.stats.json'; //eslint-disable-line import webpackClientStats from '@build/client.stats.json'; //eslint-disable-line
// Renderer for static-site-generator-webpack-plugin (async rendering via promises) // Renderer for static-site-generator-webpack-plugin (async rendering via promises)
export default function render(locals) { export default function render(locals) {
return prerender(routes, locals.path).then(() => { return preload(routes, locals.path).then(() => {
const context = {}; const context = {};
const appHtml = ReactDOMServer.renderToString( const appHtml = ReactDOMServer.renderToString(
<StaticRouter location={locals.path} context={context}> <StaticRouter location={locals.path} context={context}>