add code splitting

Author: MacKentoch

.babelrc

@@ -9,7 +9,8 @@
  ],
  "plugins": [
  "transform-regenerator",
- "transform-async-to-generator"
+ "transform-async-to-generator",
+ "dynamic-import-webpack"
  ],
  "env": {
  "test": {

README.md

@@ -16,6 +16,12 @@ This starter also embeds `JWT token based` `authentication` (check [Route](https
  - *no more struggle in redux with async thank to Apollo Client (you can even get rid of redux thunk or redux saga if you needed theses just for your asyncs. Otherwise keep them since they are nice :smile:)*
 - [redux-devtools-extension](https://github.com/zalmoxisus/redux-devtools-extension#redux-devtools-extension) to make developments a pure pleasure.
 
+## New 🎉 since v3.0.0!
+
+- Add `code splitting` by using `dynamic import` (*router level but you can extend to component level as you feel the need*)
+ - *NOTE: combined with SSR server and SW for caching, this is a good start to follow PWA path!*
+ - Want to know more about code splitting with SSR a React application, [read this complete beautiful article](https://marmelab.com/blog/2017/10/17/code-splitting.html) (don't forget to clap the author - no I don't even know him 😉 - but this is a really nice job)
+
 ## Detailed Content
 
 **Front:**
@@ -26,6 +32,7 @@ This starter also embeds `JWT token based` `authentication` (check [Route](https
 - React-Redux 5.x (*Redux is not specific to ReactJS, you could easily use it with Angular2 for instance*)
 - React-Router-Redux (*previously named react-simple-router*)
 - react-router (4.x- [github :link:](https://github.com/reactjs/react-router))
+- loadable-components (1.4.x [github :link:](https://github.com/smooth-code/loadable-components))
 - styled-components (3.2.x- [github :link:](https://github.com/styled-components/styled-components))
 - Bootstrap (3.x - [github :link:](https://github.com/twbs/bootstrap))
 - React-Bootstrap ([github :link:](https://github.com/react-bootstrap/react-bootstrap))

docs/assets/precache-manifest.1b17d6b16807bcc99953987739f19867.js

@@ -8,6 +8,7 @@
  "jest": "jest",
  "dev": "rimraf docs/assets && cross-env NODE_ENV=dev webpack --display-entrypoints --config webpack.dev.config.js",
  "prod": "rimraf docs/assets && cross-env NODE_ENV=production webpack -p --config webpack.production.config.js",
+ "analyze": "rimraf docs/assets && cross-env NODE_ENV=production webpack -p --config webpack.bundle-analyze.config.js",
  "start": "cross-env NODE_ENV=dev node server.hot.reload",
  "start-spa-dev": "npm run dev && cross-env NODE_ENV=dev nodemon ./src/server/SPA/index.js",
  "start-spa-prod": "npm run prod && cross-env NODE_ENV=production node ./src/server/SPA/index.js",
@@ -85,6 +86,7 @@
  "babel-eslint": "^8.2.1",
  "babel-jest": "^22.4.1",
  "babel-loader": "^7.1.3",
+ "babel-plugin-dynamic-import-webpack": "^1.0.2",
  "babel-plugin-transform-async-to-generator": "^6.24.1",
  "babel-plugin-transform-regenerator": "^6.26.0",
  "babel-preset-env": "^1.6.1",
@@ -135,6 +137,7 @@
  "style-loader": "^0.20.1",
  "url-loader": "^0.6.2",
  "webpack": "^3.10.0",
+ "webpack-bundle-analyzer": "^2.11.1",
  "webpack-dev-middleware": "^2.0.4",
  "webpack-dev-server": "^2.11.1",
  "webpack-hot-middleware": "^2.21.0",
@@ -169,6 +172,7 @@
  "jquery": "^3.0.0",
  "js-base64": "^2.4.3",
  "jwt-decode": "^2.2.0",
+ "loadable-components": "^1.4.0",
  "lodash.debounce": "^4.0.8",
  "lodash.throttle": "^4.1.1",
  "moment": "^2.20.1",

docs/assets/sw.js

@@ -0,0 +1,132 @@
+// @flow
+
+const webpack = require('webpack');
+const path = require('path');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
+ .BundleAnalyzerPlugin;
+
+const assetsDir = path.resolve(__dirname, 'docs/assets');
+const nodeModulesDir = path.resolve(__dirname, 'node_modules');
+const indexFile = path.resolve(__dirname, 'src/front/index.js');
+
+const SPLIT_STYLE = true;
+
+const config = {
+ entry: {
+ app: ['babel-polyfill', indexFile],
+ vendor: [
+ 'apollo-client',
+ 'babel-polyfill',
+ 'bootstrap',
+ 'classnames',
+ 'graphql-tag',
+ 'jquery',
+ 'js-base64',
+ 'moment',
+ 'react',
+ 'react-apollo',
+ 'react-bootstrap',
+ 'react-dom',
+ 'react-motion',
+ 'react-notification',
+ 'react-redux',
+ 'react-router',
+ 'react-router-dom',
+ 'history',
+ 'react-router-redux',
+ 'react-tap-event-plugin',
+ 'redux',
+ 'redux-thunk',
+ ],
+ },
+ output: {
+ path: assetsDir,
+ filename: 'app.bundle.js',
+ },
+ module: {
+ rules: [
+ {
+ test: /\.jsx?$/,
+ exclude: [nodeModulesDir],
+ loader: 'babel-loader',
+ },
+ {
+ test: /\.css$/,
+ use: SPLIT_STYLE
+ ? ExtractTextPlugin.extract({
+ fallback: 'style-loader',
+ use: [
+ { loader: 'css-loader', options: { importLoaders: 1 } },
+ 'postcss-loader',
+ ],
+ })
+ : [
+ 'style-loader',
+ { loader: 'css-loader', options: { importLoaders: 1 } },
+ 'postcss-loader',
+ ],
+ },
+ {
+ test: /\.scss$/,
+ use: SPLIT_STYLE
+ ? ExtractTextPlugin.extract({
+ fallback: 'style-loader',
+ use: [
+ { loader: 'css-loader', options: { importLoaders: 1 } },
+ 'postcss-loader',
+ 'sass-loader',
+ ],
+ })
+ : [
+ 'style-loader',
+ { loader: 'css-loader', options: { importLoaders: 1 } },
+ 'postcss-loader',
+ 'sass-loader',
+ ],
+ },
+ {
+ test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/,
+ use: [
+ {
+ loader: 'url-loader',
+ options: {
+ limit: 100000,
+ name: '[name].[ext]',
+ },
+ },
+ ],
+ },
+ ],
+ },
+ plugins: [
+ getImplicitGlobals(),
+ setNodeEnv(),
+ new ExtractTextPlugin('app.styles.css'),
+ new webpack.optimize.CommonsChunkPlugin({
+ name: 'vendor',
+ filename: 'app.vendor.bundle.js',
+ }),
+ new BundleAnalyzerPlugin(),
+ ],
+};
+
+/*
+* here using hoisting so don't use `var NAME = function()...`
+*/
+function getImplicitGlobals() {
+ return new webpack.ProvidePlugin({
+ $: 'jquery',
+ jQuery: 'jquery',
+ });
+}
+
+function setNodeEnv() {
+ return new webpack.DefinePlugin({
+ 'process.env': {
+ NODE_ENV: JSON.stringify('production'),
+ },
+ });
+}
+
+module.exports = config;