commit 82a54939ee3407ba8cb90cc8111366be01813081
parent cd1c29976806d47711a1a2eaeae213ed0fd065f2
Author: Vladimir Kutepov <frenzzy.man@gmail.com>
Date: Fri, 21 Oct 2016 22:59:24 +0400
Add code splitting example (#901)
Diffstat:
4 files changed, 15 insertions(+), 10 deletions(-)
diff --git a/src/components/Html.js b/src/components/Html.js
@@ -10,7 +10,7 @@
import React, { PropTypes } from 'react';
import { analytics } from '../config';
-function Html({ title, description, style, script, children }) {
+function Html({ title, description, style, script, chunk, children }) {
return (
<html className="no-js" lang="en">
<head>
@@ -25,6 +25,7 @@ function Html({ title, description, style, script, children }) {
<body>
<div id="app" dangerouslySetInnerHTML={{ __html: children }} />
{script && <script src={script} />}
+ {chunk && <script src={chunk} />}
{analytics.google.trackingId &&
<script
dangerouslySetInnerHTML={{ __html:
@@ -45,6 +46,7 @@ Html.propTypes = {
description: PropTypes.string.isRequired,
style: PropTypes.string,
script: PropTypes.string,
+ chunk: PropTypes.string,
children: PropTypes.string,
};
diff --git a/src/routes/admin/index.js b/src/routes/admin/index.js
@@ -8,7 +8,6 @@
*/
import React from 'react';
-import Admin from './Admin';
const title = 'Admin Page';
const isAdmin = false;
@@ -17,13 +16,18 @@ export default {
path: '/admin',
- action() {
+ async action() {
if (!isAdmin) {
return { redirect: '/login' };
}
+ const Admin = await new Promise((resolve) => {
+ require.ensure([], (require) => resolve(require('./Admin').default), 'admin');
+ });
+
return {
title,
+ chunk: 'admin',
component: <Admin title={title} />,
};
},
diff --git a/src/server.js b/src/server.js
@@ -112,6 +112,7 @@ app.get('*', async (req, res, next) => {
data.children = ReactDOM.renderToString(<App context={context}>{route.component}</App>);
data.style = [...css].join('');
data.script = assets.main.js;
+ data.chunk = assets[route.chunk] && assets[route.chunk].js;
const html = ReactDOM.renderToStaticMarkup(<Html {...data} />);
res.status(route.status || 200);
diff --git a/tools/webpack.config.js b/tools/webpack.config.js
@@ -243,10 +243,6 @@ const clientConfig = extend(true, {}, config, {
warnings: VERBOSE,
},
}),
-
- // A plugin for a more aggressive chunk merging strategy
- // https://webpack.github.io/docs/list-of-plugins.html#aggressivemergingplugin
- new webpack.optimize.AggressiveMergingPlugin(),
],
],
@@ -263,9 +259,7 @@ const serverConfig = extend(true, {}, config, {
entry: './server.js',
output: {
- path: path.resolve(__dirname, '../build'),
- filename: 'server.js',
- chunkFilename: 'server.[name].js',
+ filename: '../../server.js',
libraryTarget: 'commonjs2',
},
@@ -286,6 +280,10 @@ const serverConfig = extend(true, {}, config, {
// https://webpack.github.io/docs/list-of-plugins.html#bannerplugin
new webpack.BannerPlugin('require("source-map-support").install();',
{ raw: true, entryOnly: false }),
+
+ // Do not create separate chunks of the server bundle
+ // https://webpack.github.io/docs/list-of-plugins.html#limitchunkcountplugin
+ new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
],
node: {
