commit e61838ad6ce7b57773623a42494470fd8b2c73c7
parent f04ea5bb51bd0dc7905099259becb937fa3dd14e
Author: Vladimir Kutepov <frenzzy.man@gmail.com>
Date: Tue, 22 Nov 2016 19:39:19 +0400
Move vendors to separate bundle (#985)
Diffstat:
3 files changed, 19 insertions(+), 8 deletions(-)
diff --git a/src/components/Html.js b/src/components/Html.js
@@ -15,13 +15,12 @@ class Html extends React.Component {
title: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
style: PropTypes.string,
- script: PropTypes.string,
- chunk: PropTypes.string,
+ scripts: PropTypes.arrayOf(PropTypes.string.isRequired),
children: PropTypes.string,
};
render() {
- const { title, description, style, script, chunk, children } = this.props;
+ const { title, description, style, scripts, children } = this.props;
return (
<html className="no-js" lang="en">
<head>
@@ -35,8 +34,7 @@ class Html extends React.Component {
</head>
<body>
<div id="app" dangerouslySetInnerHTML={{ __html: children }} />
- {script && <script src={script} />}
- {chunk && <script src={chunk} />}
+ {scripts && scripts.map(script => <script key={script} src={script} />)}
{analytics.google.trackingId &&
<script
dangerouslySetInnerHTML={{ __html:
diff --git a/src/server.js b/src/server.js
@@ -114,10 +114,15 @@ app.get('*', async (req, res, next) => {
const data = { ...route };
data.children = ReactDOM.renderToString(<App context={context}>{route.component}</App>);
data.style = [...css].join('');
- data.script = assets.client.js;
- data.chunk = assets[route.chunk] && assets[route.chunk].js;
- const html = ReactDOM.renderToStaticMarkup(<Html {...data} />);
+ data.scripts = [
+ assets.vendor.js,
+ assets.client.js,
+ ];
+ if (assets[route.chunk]) {
+ data.scripts.push(assets[route.chunk].js);
+ }
+ const html = ReactDOM.renderToStaticMarkup(<Html {...data} />);
res.status(route.status || 200);
res.send(`<!doctype html>${html}`);
} catch (err) {
diff --git a/tools/webpack.config.js b/tools/webpack.config.js
@@ -27,6 +27,7 @@ const config = {
path: path.resolve(__dirname, '../build/public/assets'),
publicPath: '/assets/',
sourcePrefix: ' ',
+ pathinfo: isVerbose,
},
module: {
@@ -248,6 +249,13 @@ const clientConfig = extend(true, {}, config, {
// https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin
new webpack.optimize.OccurrenceOrderPlugin(true),
+ // Move modules that occur in multiple entry chunks to a new entry chunk (the commons chunk).
+ // http://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
+ new webpack.optimize.CommonsChunkPlugin({
+ name: 'vendor',
+ minChunks: module => /node_modules/.test(module.resource),
+ }),
+
...isDebug ? [] : [
// Search for equal or similar files and deduplicate them in the output
// https://webpack.github.io/docs/list-of-plugins.html#dedupeplugin
