diff --git a/v2/lib/core/serverEntry.js b/v2/lib/core/serverEntry.js index 443c38c304..2047fe869d 100644 --- a/v2/lib/core/serverEntry.js +++ b/v2/lib/core/serverEntry.js @@ -2,20 +2,26 @@ import React from 'react'; import {StaticRouter} from 'react-router-dom'; import ReactDOMServer from 'react-dom/server'; import Helmet from 'react-helmet'; +import {getBundles} from 'react-loadable/webpack'; +import Loadable from 'react-loadable'; -import App from './App'; -import preload from './preload'; -import routes from '@generated/routes'; // eslint-disable-line +import reactLoadableStats from '@build/react-loadable.json'; //eslint-disable-line import webpackClientStats from '@build/client.stats.json'; //eslint-disable-line +import routes from '@generated/routes'; // eslint-disable-line +import preload from './preload'; +import App from './App'; // Renderer for static-site-generator-webpack-plugin (async rendering via promises) export default function render(locals) { return preload(routes, locals.path).then(() => { + const modules = []; const context = {}; const appHtml = ReactDOMServer.renderToString( - - - , + modules.push(moduleName)}> + + + + , ); const helmet = Helmet.renderStatic(); @@ -28,7 +34,11 @@ export default function render(locals) { ]; const metaHtml = metaStrings.filter(Boolean).join('\n '); - const assets = webpackClientStats.assetsByChunkName.main; + const bundles = getBundles(reactLoadableStats, modules); + const assets = [ + ...webpackClientStats.assetsByChunkName.main, + ...bundles.map(b => b.file), + ]; const jsFiles = assets.filter(value => value.match(/\.js$/)); const cssFiles = assets.filter(value => value.match(/\.css$/)); const {baseUrl} = locals; @@ -40,17 +50,21 @@ export default function render(locals) { ${metaHtml} - ${cssFiles.map( - cssFile => - ``, - )} + ${cssFiles + .map( + cssFile => + ``, + ) + .join('\n')}
${appHtml}
- ${jsFiles.map( - jsFile => - ``, - )} + ${jsFiles + .map( + jsFile => + ``, + ) + .join('\n')} `; diff --git a/v2/lib/webpack/base.js b/v2/lib/webpack/base.js index 2ec8d72829..2596b43f05 100644 --- a/v2/lib/webpack/base.js +++ b/v2/lib/webpack/base.js @@ -60,6 +60,7 @@ module.exports = function createBaseConfig(props, isServer) { presets: ['@babel/env', '@babel/react'], plugins: [ isServer ? 'dynamic-import-node' : '@babel/syntax-dynamic-import', + 'react-loadable/babel', ], }); } diff --git a/v2/lib/webpack/client.js b/v2/lib/webpack/client.js index e1462ec21e..1e46e8bd80 100644 --- a/v2/lib/webpack/client.js +++ b/v2/lib/webpack/client.js @@ -1,6 +1,7 @@ const path = require('path'); const webpackNiceLog = require('webpack-nicelog'); const {StatsWriterPlugin} = require('webpack-stats-plugin'); +const {ReactLoadablePlugin} = require('react-loadable/webpack'); const cleanWebpackPlugin = require('clean-webpack-plugin'); const createBaseConfig = require('./base'); const {applyChainWebpack} = require('./utils'); @@ -17,8 +18,13 @@ module.exports = function createClientConfig(props) { // write webpack stats object so we can pickup correct client bundle path in server. config - .plugin('stats') + .plugin('client-stats') .use(StatsWriterPlugin, [{filename: 'client.stats.json'}]); + config + .plugin('react-loadable-stats') + .use(ReactLoadablePlugin, [ + {filename: path.join(outDir, 'react-loadable.json')}, + ]); // show compilation progress bar and build time const isProd = process.env.NODE_ENV === 'production';