Michał Janaszek
"Single-page application loading time optimization. Powered by Webpack, React, Node.js and isomorphic-style-loader"
2016-11-09
-
Webpack code splitting
Required: webpack
-
Load chunks in the background
Required: webpack
-
Server side rendering
Required: webpack, node, react / angular 2 (?)
-
Isomorphic-style-loader powered by CSS Modules
Required: webpack, node, react, isomorphic-style-loader
Server
app.use(express.static(path.join(__dirname, 'public')));
app.get('*', (req, res) => {
const html = `<html>
<head>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div id="root">Loading</div>
<script async src="/bundle.js"></script>
</body>
</html>`;
res.status(200).send(html);
});
0
Router
import Layout from './Containers/Layout';
import Home from './Containers/Pages/Home';
import Talks from './Containers/Pages/Talks';
import Gallery from './Containers/Pages/Gallery';
const routes = {
path: '/',
component: Layout,
indexRoute: { component: Home },
childRoutes: [
{ path: 'talks', component: Talks },
{ path: 'gallery', component: Gallery },
],
};
export default routes;
0
Layout
import './layout.scss';
import Menu from '../Menu';
import Footer from '../Footer';
const Layout = props => (
<div className="root">
<Menu />
<div className="container">
{props.children}
</div>
<Footer />
</div>
);
export default Layout;
0
Menu
import { Link } from 'react-router';
import './menu.scss';
const Menu = () => (
<div className="menu">
<Link className="menu--link" activeClassName="menu--link__active" to="/">
Home
</Link>
// ...
</div>
);
export default Menu;
0
Webpack
entry: path.resolve(__dirname, 'src', 'client.js'),
output: {
path: path.resolve(__dirname, 'build', 'public'),
filename: 'bundle.js',
},
module: {
loaders: [{
exclude: /node_modules/,
loader: 'babel',
}, {
test: [/\.scss$/, /\.css$/],
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader'),
}],
},
plugins: [ new ExtractTextPlugin('style.css', { allChunks: true }) ],
0
Home route
0
Router
import Layout from './Containers/Layout';
const HomePage = (nextState, cb) => {
require.ensure([], require => cb(null, require('./Containers/Pages/Home').default));
};
const TalksPage = (nextState, cb) => {
require.ensure([], require => cb(null, require('./Containers/Pages/Talks').default));
};
const GalleryPage = (nextState, cb) => { /* ... */ };
const routes = {
path: '/',
component: Layout,
indexRoute: { getComponent: HomePage },
childRoutes: [
{ path: 'talks', getComponent: TalksPage },
{ path: 'gallery', getComponent: GalleryPage },
],
};
1
Home route
1
From home to talks
1
Router
import Layout from './Containers/Layout';
import backgroundLoader from './backgroundLoader';
const HomePage = (nextState, cb) => {
require.ensure([], require => cb(null, require('./Containers/Pages/Home').default));
};
const TalksPage = (nextState, cb) => { /* ... */ };
const GalleryPage = (nextState, cb) => { /* ... */ };
backgroundLoader(HomePage);
backgroundLoader(TalksPage);
backgroundLoader(GalleryPage);
const routes = { /* ... */ };
export default routes;
2
backgroundLoader
const queue = [];
let isWaiting = false;
const requestLoad = () => {
if (isWaiting || !queue.length) { return; }
const loader = queue.pop();
isWaiting = true;
setTimeout(() => {
loader(() => {}, () => {
isWaiting = false;
requestLoad();
});
}, 200);
};
export default loader => {
queue.push(loader);
requestLoad();
};
2
From home to talks
2
Server
import ReactDOMServer from 'react-dom/server';
import { Router, match, createMemoryHistory } from 'react-router';
import routes from './routes';
app.get('*', (req, res) => {
const history = createMemoryHistory(req.url);
match({ history, routes }, (error, redirectLocation, renderProps) => {
const body = ReactDOMServer.renderToString(<Router {...renderProps} />);
const html = `<html>
<head>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div id="root"> ${body} </div>
<script async src="/bundle.js"></script>
</body>
</html>`;
res.status(200).send(html);
});
});
3
Webpack
const client = {
entry: 'client.js',
output: { /* client build destination */ },
target: 'web',
module: { loaders: [ ...commonLoaders, ...clientLoaders ] },
plugins: [ ...commonPlugins, ...clientPlugins ],
};
const server = {
entry: 'server.js',
output: { /* server build destination */ },
target: 'node',
module: { loaders: [ ...commonLoaders, ...serverLoaders ] },
plugins: [ ...commonPlugins, ...serverPlugins ],
externals: nodeExternals(),
};
module.exports = [ client, server ];
3
Home route
3
._2cr2 {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px
}
@media (min-width: 768px) {
._2cr2 {
width: 750px
}
}
@media (min-width: 992px) {
._2cr2 {
width: 970px
}
}
@media (min-width: 1200px) {
._2cr2 {
width: 1170px
}
}
.Lkjc {
margin-left: -15px;
margin-right: -15px
}
._1Fxh, ._1hOf, ._2aAe,
._3F50, ._3hHr, ._3Lpa,
._11K6, ._14ul, .dCl_,
.IM3C, .PjtN, .Z13z {
float: left
}
.IM3C {
width: 100%
}
._1Fxh {
width: 91.66666667%
}
._14ul {
width: 83.33333333%
}
._14ul {
width: 83.33333333%
}
._2aAe {
width: 75%
}
.Z13z {
width: 66.66666667%
}
._3Lpa {
width: 58.33333333%
}
._3hHr {
width: 50%
}
._11K6 {
width: 41.66666667%
}
Menu
import { Link } from 'react-router';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './menu.scss';
const Menu = () => (
<div className= {s.menu} >
<Link className= {s.menuLink} activeClassName= {s.menuLinkActive} to="/">
Home
</Link>
// ...
</div>
);
export default withStyles(s)(Menu);
4
Server
const css = [];
const onInsertCss = (...styles) => { styles.forEach(s => css.push(s._getCss())); };
let body = ReactDOMServer.renderToString(
<WithStylesContext onInsertCss={onInsertCss}>
<Router {...renderProps} />
</WithStylesContext>
);
const html = `<html>
<head>
<style id="css">${css.join('')}</style>
</head>
<body>
<div id="root">${body}</div>
<script async src="/bundle.js"></script>
</body>
</html>`;
res.status(200).send(html);
4
Webpack
module: {
loaders: [
{
test: [/\.scss$/, /\.css$/],
loaders: [
'isomorphic-style-loader',
`css-loader?${DEBUG ? 'sourceMap&' : 'minimize&'}modules&localIdentName=
${DEBUG ? '[name]_[local]_[hash:base64:4]' : '[hash:base64:4]'}`,
'sass-loader'
],
},
// ...
]
},
4
Home route
4
Comparison
See you next month at WarsawJS
