Skip to content

Commit 5f39865

Browse files
committed
update ssr readme and code cleanup
1 parent 7d687ba commit 5f39865

File tree

11 files changed

+76
-10
lines changed

11 files changed

+76
-10
lines changed

packages/create-react-scripts-dll/index.js

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,39 @@
1+
'use strict';
2+
13
const path = require('path');
4+
const webpack = require('webpack');
25
const AutoDllPlugin = require('autodll-webpack-plugin');
6+
const AssetsPlugin = require('assets-webpack-plugin');
7+
8+
// Source maps are resource heavy and can cause out of memory issue for large source files.
9+
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
310

411
module.exports = options => ({
5-
webpack(config) {
12+
webpack(config, env) {
613
const appPackageJson = path.join(process.cwd(), 'package.json');
714
const vendor = require(appPackageJson).vendor || [];
15+
const dllPlugins = [];
16+
// uglify the vendor js if in production mode
17+
if (env === 'production') {
18+
dllPlugins.push(new webpack.optimize.UglifyJsPlugin({
19+
compress: {
20+
warnings: false,
21+
comparisons: false,
22+
},
23+
output: {
24+
comments: false,
25+
ascii_only: true,
26+
},
27+
sourceMap: shouldUseSourceMap,
28+
}));
29+
}
830
config.plugins.push(
931
new AutoDllPlugin(Object.assign({
1032
inject: true,
1133
filename: '[name].[hash:8].js',
12-
path: './static/js',
34+
path: './static/js/',
1335
entry: { vendor },
36+
plugins: dllPlugins,
1437
}, options))
1538
);
1639
return config;

packages/create-react-scripts-dll/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"url": "https://github.com/raymondsze/create-react-scripts/issues"
1010
},
1111
"dependencies": {
12+
"assets-webpack-plugin": "3.5.1",
1213
"autodll-webpack-plugin": "0.2.1",
1314
"webpack": "3.6.0",
1415
"webpack-dll-bundles-plugin": "^1.0.0-beta.5"

packages/create-react-scripts-graphql/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use strict';
2+
13
const fs = require('fs');
24
const path = require('path');
35
const { getFileLoader } = require('create-react-scripts-utils');

packages/create-react-scripts-less/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use strict';
2+
13
const path = require('path');
24
const { getCssLoader, getFileLoader } = require('create-react-scripts-utils');
35

packages/create-react-scripts-sass/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use strict';
2+
13
const path = require('path');
24
const { getCssLoader, getFileLoader } = require('create-react-scripts-utils');
35

packages/create-react-scripts-ssr/README.md

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,15 +84,22 @@ const HOST = process.env.HOST || '0.0.0.0';
8484
const PORT = parseInt(process.env.PORT, 10) || 5000;
8585
const PROTOCOL = process.env.PROTOCOL || 'http';
8686

87-
// Assets path from client-side build
87+
// Assets manifest path from client-side dll build (if create-react-scripts-dll is using)
88+
const DLL_ASSETS_PATH = path.join(process.cwd(), 'build/dll-assets.json');
89+
// Assets manifest path from client-side build
8890
const ASSETS_PATH = path.join(process.cwd(), 'build/assets.json');
8991

9092
// Wait until client-side bundling finished so that assets.json is produced
9193
console.log('Waiting client-side bundling...');
9294
while (!fs.existsSync(ASSETS_PATH));
9395

9496
// Read the assets
95-
const assets = JSON.parse(fs.readFileSync(ASSETS_PATH));
97+
const assets = {
98+
// make sure dll assets before the assets of client-side build
99+
// ensure browser require the vendor module first
100+
...JSON.parse(fs.readFileSync(DLL_ASSETS_PATH)),
101+
...JSON.parse(fs.readFileSync(ASSETS_PATH)),
102+
};
96103

97104
const app = express();
98105
// in production, the serving files are under build/client folder

packages/create-react-scripts-ssr/config/webpack.config.server.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -105,15 +105,14 @@ module.exports = (paths, config, publicPath) => {
105105
);
106106
delete DefinePlugin.definitions['process.env'];
107107

108-
/*
109108
webpackConfig.plugins.push(
110109
new webpack.BannerPlugin({
111110
banner: 'require(\'source-map-support\').install();',
112111
raw: true,
113112
entryOnly: false,
114113
})
115114
);
116-
*/
115+
117116
if (process.env.NODE_ENV === 'development') {
118117
// inject other environment variable
119118
DefinePlugin.definitions['process.env.HOST'] = `"${process.env.HOST}"`;

packages/create-react-scripts-ssr/index.js

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
const fs = require('fs');
44
const path = require('path');
5-
const AssetsPlugin = require('assets-webpack-plugin')
5+
const AssetsPlugin = require('assets-webpack-plugin');
66

77
module.exports = () => ({
88
paths(paths) {
@@ -15,6 +15,7 @@ module.exports = () => ({
1515
paths.appBuild = path.join(paths.appBuild, 'client');
1616
paths.appHtml = path.join(fs.realpathSync(process.cwd()), 'public/index-static.html');
1717
paths.appAssets = path.join(paths.appBuild, '..');
18+
paths.appDllAssets = path.join(paths.appBuild, '..');
1819
return paths;
1920
},
2021
webpack(config, NODE_ENV) {
@@ -41,13 +42,35 @@ module.exports = () => ({
4142
htmlWebpackPlugin.options.filename = 'index-static.html';
4243
}
4344

45+
const autoDllPlugin = config.plugins.find(
46+
plugin => plugin.constructor.name === 'AutoDLLPlugin'
47+
);
48+
if (autoDllPlugin) {
49+
const pluginOptions = autoDllPlugin.originalSettings;
50+
const dllSubPlugins = pluginOptions.plugins || [];
51+
pluginOptions.plugins = dllSubPlugins.concat([
52+
new AssetsPlugin({
53+
filename: 'dll-assets.json',
54+
path: this.paths.appDllAssets,
55+
fullPath: true,
56+
processOutput: (assets) => {
57+
Object.values(assets).forEach(mod => {
58+
if (mod.js) mod.js = config.output.publicPath + path.join(pluginOptions.path || '', mod.js);
59+
});
60+
return JSON.stringify(assets);
61+
}
62+
})
63+
]);
64+
}
65+
4466
config.plugins.push(
4567
new AssetsPlugin({
4668
filename: 'assets.json',
4769
path: this.paths.appAssets,
4870
fullPath: true,
4971
})
5072
);
73+
5174
return config;
5275
},
5376
scripts: {
Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
const { compose } = require('create-react-scripts');
22

33
module.exports = compose(
4-
require('react-scripts-web'),
5-
require('create-react-scripts-ssr')()
4+
require('create-react-scripts-ssr')(),
5+
require('react-scripts-web')
66
);

packages/example-universal-react-app/src/server.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,16 @@ const PORT = process.env.PORT || '5000';
1414
const PROTOCOL = process.env.PROTOCOL || 'http';
1515

1616
const ASSETS_PATH = path.join(process.cwd(), 'build/assets.json');
17+
const DLL_ASSETS_PATH = path.join(process.cwd(), 'build/dll-assets.json');
1718

1819
console.log('Waiting client-side bundling...');
1920
while (!fs.existsSync(ASSETS_PATH));
2021

21-
const assets = JSON.parse(fs.readFileSync(ASSETS_PATH));
22+
const assets = {
23+
...JSON.parse(fs.readFileSync(DLL_ASSETS_PATH)),
24+
...JSON.parse(fs.readFileSync(ASSETS_PATH)),
25+
};
26+
2227
const app = express();
2328

2429
if (process.env.NODE_ENV === 'production') {

0 commit comments

Comments
 (0)