feat: allow dynamic imports to be enabled/disabled

Author: calvinl

config/index.js

@@ -1,6 +1,9 @@
 const { mapValues, keyBy } = require('lodash');
 
 module.exports = {
+  // Enable or disable dynamic imports (code splitting)
+  enableDynamicImports: false,
+
   // The env vars to expose on the client side. If you add them here, they will
   // be available on the client as process.env[VAR_NAME], same as they would be
   // in node.js.

server/index.js

@@ -75,38 +75,42 @@ const startServer = () => {
 if (!module.parent) {
   let server;
 
-  // Ensure react-loadable stats file exists before starting the server
-  const statsPath = path.join(__dirname, '..', 'react-loadable.json');
-  const watcher = chokidar.watch(statsPath, { persistent: true });
+  if (!config.enableDynamicImports) {
+    startServer();
+  } else {
+    // Ensure react-loadable stats file exists before starting the server
+    const statsPath = path.join(__dirname, '..', 'react-loadable.json');
+    const watcher = chokidar.watch(statsPath, { persistent: true });
 
-  console.info(`Checking/waiting for ${statsPath}...`);
+    console.info(`Checking/waiting for ${statsPath}...`);
 
-  watcher.on('all', (event, path) => {
-    if (event === 'add') {
-      if (env === 'production') {
-        watcher.close();
-      }
+    watcher.on('all', (event, path) => {
+      if (event === 'add') {
+        if (env === 'production') {
+          watcher.close();
+        }
 
-      console.info(`Stats file found at ${path}, starting server...`);
+        console.info(`Stats file found at ${path}, starting server...`);
 
-      startServer().then(s => server = s);
+        startServer().then(s => server = s);
 
-    } else if (event === 'change') {
-      if (env === 'production') {
-        watcher.close();
-      }
+      } else if (event === 'change') {
+        if (env === 'production') {
+          watcher.close();
+        }
 
-      console.info('Stats file changed, restarting server...');
+        console.info('Stats file changed, restarting server...');
 
-      if (server) {
-        // if the server is already started, restart it.
-        server.close(() => {
+        if (server) {
+          // if the server is already started, restart it.
+          server.close(() => {
+            startServer().then(s => server = s);
+          });
+        } else {
+          // otherwise, just start the server.
           startServer().then(s => server = s);
-        });
-      } else {
-        // otherwise, just start the server.
-        startServer().then(s => server = s);
+        }
       }
-    }
-  });
+    });
+  }
 }

server/renderer/render.js

@@ -13,12 +13,22 @@ export default function render(html, initialState = {}, bundles = []) {
 
   const assets = global.ISOTools.assets();
   const appJs = assets.javascript.app;
+  const vendorJs = assets.javascript.vendor;
   const helmet = Helmet.renderStatic();
   const appCss = assets.styles.app;
+  const vendorCss = assets.styles.vendor;
   const chunkCss = bundles.filter(bundle => bundle.file.match(/.css/));
   const chunkJs = bundles.filter(bundle => bundle.file.match(/.js/));
 
-  return compile(
-    { html, helmet, appCss, appJs, chunkCss, chunkJs, initialState }
-  );
+  return compile({
+    html,
+    helmet,
+    appCss,
+    appJs,
+    vendorJs,
+    vendorCss,
+    chunkCss,
+    chunkJs,
+    initialState
+  });
 }

server/templates/layouts/application.html

@@ -5,18 +5,20 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width height=device-height" />
   <link rel="shortcut icon" type="image/x-icon" href="/assets/favicon.png">
+  <%= vendorCss ? `<link type="text/css" rel="stylesheet" href="${vendorCss}" />` : '' %>
   <link type="text/css" rel="stylesheet" href="<%= appCss %>" />
-<%= chunkCss.map(bundle => {
-  return `  <link type="text/css" rel="stylesheet" href="${process.env.PUBLIC_ASSET_PATH}${bundle.file}" />`
-}).join('\n') %>
+  <%= chunkCss.map(bundle => {
+    return `<link type="text/css" rel="stylesheet" href="${process.env.PUBLIC_ASSET_PATH}${bundle.file}" />`
+  }).join('\n') %>
 </head>
 <body>
   <div id="app"><%= html %></div>
   <script>window.__INITIAL_STATE__ = <%= JSON.stringify(initialState) %>;</script>
+  <%= vendorJs ? `<script src="${vendorJs}"></script>` : '' %>
   <script src="<%= appJs %>"></script>
-<%= chunkJs.map(bundle => {
-  return `  <script src="${process.env.PUBLIC_ASSET_PATH}${bundle.file}"></script>`
-}).join('\n') %>
+  <%= chunkJs.map(bundle => {
+    return `<script src="${process.env.PUBLIC_ASSET_PATH}${bundle.file}"></script>`
+  }).join('\n') %>
   <script>window.main();</script>
 </body>
 </html>

webpack/base.js

@@ -11,25 +11,38 @@ import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import { ReactLoadablePlugin } from 'react-loadable/webpack';
 import config from '../config';
 
-const ssr = yn(process.env.SSR) || false;
-const isoPlugin = new IsoPlugin(config.isomorphicConfig).development(isDev);
-const extractTextPlugin = new ExtractTextPlugin({
+let ssr = yn(process.env.SSR) || false;
+let isoPlugin = new IsoPlugin(config.isomorphicConfig).development(isDev);
+let extractTextPlugin = new ExtractTextPlugin({
   filename: isDev ? '[name].css' : '[name].[contenthash].css',
   allChunks: true,
   disable: ssr
 });
-const plugins = [
+
+let plugins = [
   isoPlugin,
-  new ReactLoadablePlugin({
-    filename: path.join(__dirname, '..', 'react-loadable.json')
-  }),
   extractTextPlugin,
   new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /en|es/),
   new webpack.DefinePlugin({
     'process.env': config.clientEnv
   })
 ];
 
+let output = {
+  path: path.join(__dirname, '..', process.env.PUBLIC_OUTPUT_PATH),
+  filename: '[name].bundle.js',
+  publicPath: process.env.PUBLIC_ASSET_PATH || '/'
+};
+
+// Enable dynamically imported code-splitting
+if (config.enableDynamicImports) {
+  plugins.unshift(new ReactLoadablePlugin({
+    filename: path.join(__dirname, '..', 'react-loadable.json')
+  }));
+
+  output.chunkFilename = '[name].bundle.js';
+}
+
 if (process.env.ANALYZE) {
   plugins.push(new BundleAnalyzerPlugin());
 }
@@ -39,12 +52,7 @@ export default {
   entry: {
     app: ['./client/index']
   },
-  output: {
-    path: path.join(__dirname, '..', process.env.PUBLIC_OUTPUT_PATH),
-    filename: '[name].bundle.js',
-    chunkFilename: '[name].bundle.js',
-    publicPath: process.env.PUBLIC_ASSET_PATH || '/'
-  },
+  output,
   resolve: {
     extensions: ['.js', '.jsx', '.scss'],
     alias: mapValues(config.clientResolvePaths, str =>

webpack/development.hot.js

@@ -2,6 +2,7 @@
 import WebpackDevServer from 'webpack-dev-server';
 import webpack from 'webpack';
 import baseConfig from './base';
+import config from '../config';
 
 const {
   DEV_SERVER_PORT,
@@ -16,41 +17,52 @@ const entry = [
 ];
 
 // Additional plugins
-const plugins = [
+let plugins = [
   new webpack.HotModuleReplacementPlugin(),
   new webpack.NoEmitOnErrorsPlugin(),
   new webpack.NamedModulesPlugin()
 ];
 
+if (!config.enableDynamicImports) {
+  plugins.push(new webpack.optimize.CommonsChunkPlugin({
+    name: 'vendor',
+    filename: '[name].js',
+    minChunks: module => /node_modules/.test(module.resource)
+  }));
+}
+
 // Additional loaders
 const loaders = [];
 
-const config = Object.assign({}, baseConfig, {
+const webpackConfig = {
+  ...baseConfig,
   devtool: 'eval',
-  entry: Object.assign({}, baseConfig.entry, {
+  entry: {
+    ...baseConfig.entry,
     app: [
       ...entry,
       ...baseConfig.entry.app
     ]
-  }),
+  },
   plugins: [
     // don't use the first plugin (isomorphic plugin)
     ...baseConfig.plugins,
     ...plugins
   ],
-  module: Object.assign({}, baseConfig.module, {
+  module: {
+    ...baseConfig.module,
     rules: [
       ...baseConfig.module.rules,
       ...loaders
     ]
-  })
-});
+  }
+};
 
 console.info('Firing up Webpack dev server...\n');
 
-new WebpackDevServer(webpack(config), {
+new WebpackDevServer(webpack(webpackConfig), {
   port: DEV_SERVER_PORT,
-  publicPath: config.output.publicPath,
+  publicPath: webpackConfig.output.publicPath,
   hot: true,
   historyApiFallback: true,
   noInfo: false,

webpack/production.babel.js

@@ -13,15 +13,11 @@ export default {
   ...baseConfig,
   output: {
     ...baseConfig.output,
-    ...{
-      filename: '[name].[hash].js'
-    }
+    filename: '[name].[hash].js'
   },
   plugins,
   module: {
     ...baseConfig.module,
-    ...{
-      rules: [...baseConfig.module.rules, ...loaders]
-    }
+    rules: [...baseConfig.module.rules, ...loaders]
   }
 };

webpack/production.client.babel.js

@@ -2,8 +2,10 @@ import webpack from 'webpack';
 import baseConfig from './production.babel';
 import CompressionPlugin from 'compression-webpack-plugin';
 import UglifyJSPlugin from 'uglifyjs-webpack-plugin';
+import config from '../config';
 
-const plugins = [
+let plugins = [
+  ...baseConfig.plugins,
   new webpack.BannerPlugin({
     banner:
       'hash:[hash], chunkhash:[chunkhash], name:[name], ' +
@@ -26,25 +28,34 @@ const plugins = [
     test: /\.css$|\.js$|\.html$/,
     threshold: 10240,
     minRatio: 0.8
+  }),
+  new webpack.optimize.CommonsChunkPlugin({
+    name: 'vendor',
+    filename: '[name].[hash].js',
+    minChunks: module => /node_modules/.test(module.resource)
   })
 ];
 
-const loaders = [];
+let output = {
+  ...baseConfig.output,
+  filename: '[name].[hash].js'
+};
+
+let loaders = [];
+
+if (config.enableDynamicImports) {
+  // remove commons chunk plugin
+  plugins = plugins.slice(0, plugins.length - 1);
+
+  output.chunkFilename = '[name].[hash].js';
+}
 
 export default {
   ...baseConfig,
-  output: {
-    ...baseConfig.output,
-    ...{
-      filename: '[name].[hash].js',
-      chunkFilename: '[name].[hash].js',
-    }
-  },
-  plugins: [...baseConfig.plugins, ...plugins],
+  output,
+  plugins,
   module: {
     ...baseConfig.module,
-    ...{
-      rules: [...baseConfig.module.rules, ...loaders]
-    }
+    rules: [...baseConfig.module.rules, ...loaders]
   }
 };

webpack/production.server.babel.js

@@ -11,8 +11,8 @@ import { babel } from '../package.json';
 const babelOpts = set(babel, 'presets[0][1].targets.uglify', true);
 
 const plugins = [
-  // we don't need the isomorphic or react-loadable plugins here
-  ...baseConfig.plugins.slice(2),
+  // we don't need the isomorphic and react-loadable plugins here
+  ...baseConfig.plugins.slice(config.enableDynamicImports ? 2 : 1),
   new UglifyJSPlugin({
     sourceMap: true
   }),