separating vendors, minigying bundles, diff node config, diff babel config, multiple node instances.

Author: brenda-jimenez

.gitignore

@@ -24,7 +24,7 @@ coverage
 .lock-wscript
 
 # Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
+build
 
 # Dependency directories
 node_modules

lib/bundle.js

@@ -55,19 +55,20 @@ class App extends React.PureComponent {
         //TODO: Leaving this purposely uncommented. Be aware that in production this has to be commented.
         //We need consistent measures that's why we need to add this lines so we messure the components at the same point
         //Those numbers need to be the same every time we refresh
-        setImmediate(()=>{Perf.start();});
-        setTimeout(()=>{ Perf.stop();
-        Perf.printWasted();},5000);
+        //setImmediate(()=>{Perf.start();});
+        //setTimeout(()=>{ Perf.stop();
+        //Perf.printWasted();},5000);
     }
 
     componentWillUnmount() {
         this.props.store.unsubscribe(this.subscriptionId);
     }
 
-    componentWillUpdate(nextProps, nextState)
-    {
-        console.log('Updating TimeStamp');
-    }
+    //This life cylce method can help us to identify where can we improve our optimization
+    // componentWillUpdate(nextProps, nextState)
+    // {
+    //     console.log('Updating TimeStamp');
+    // }
 
     //In react we cannot return two elements unless
     //Option 1. is in an array so we need to pass a Key elements

lib/components/App.js

@@ -29,14 +29,21 @@
     "update-snapshot":"jest --updateSnapshot",
     "test": "jest --watch",
     "verify-tests": "jest --coverage",
-    "dev": "NODE_PATH=./lib pm2 start lib/server.js --watch --interpreter babel-node",
-    "webpack": "webpack -wd"
+    "dev": "NODE_PATH=./lib pm2 start lib/server.js --watch --interpreter babel-node --name appDev",
+    "webpack": "webpack -wd",
+    "build-webpack" : "webpack -p",
+    "build-node" : "babel lib -d build --copy-files",
+    "start-prod": "NODE_ENV=production NODE_PATH=./build pm2 start build/server.js -i max --name appProd"
+
   },
   "babel": {
     "presets": [
       "react",
-      "env",
-      "stage-2"
+      ["env", {"targets" : {"node" : "current" }}]
+    ],
+    "plugins" : [
+      "transform-class-properties",
+      "transform-object-rest-spread"
     ]
   },
   "devDependencies": {

package.json

@@ -16,6 +16,8 @@
 <div id="root"><%- initialMarkup -%></div>
 
 <!-- Nowadays it is a good practice to make reference to just one file so we do not have multiple references -->
-<script src="/bundle.js" charset="UTF-8"></script>
+<!-- todo: Ideally we should automate the regeneration of this file to an incremental version (1,2,3...) according to our deployment -->
+<script src="/vendor.js?version=1" charset="UTF-8"></script>
+<script src="/app.js?version=1" charset="UTF-8"></script>
 </body>
 </html>

views/index.ejs

@@ -1,4 +1,5 @@
 const path = require('path');
+const webpack = require ('webpack');
 
 //adding the resolve section allow us to tell webpack that if it sees a require, it also need to look in the
 //lib and node_modules folder
@@ -7,16 +8,38 @@ const config = {
         path.resolve('./lib'),
         path.resolve('./node_modules'),
     ]},
-    entry: [ 'babel-polyfill', './lib/renderers/dom.js'],
+    entry: {
+        vendor: ['babel-polyfill', 'react', 'react-dom', 'prop-types', 'axios', 'lodash.debounce', 'lodash.pickby'],
+        app: ['./lib/renderers/dom.js']
+    },
     output: {
         path: path.resolve(__dirname, 'public'),
-        filename: 'bundle.js'
+        filename: '[name].js'
     },
     module: {
         rules: [
-            { test: /\.js$/, exclude:/node_modules/, use: 'babel-loader' }
+            {
+                test: /\.js$/, exclude: /node_modules/,
+                use: {
+                    loader: 'babel-loader',
+                    options: {
+                        presets:['react', 'env', 'stage-2']
+                    }
+                }
+            }
         ]
-    }
+    },
+    plugins: [
+        new webpack.optimize.CommonsChunkPlugin({
+            name: "vendor",
+            // filename: "vendor.js"
+            // (Give the chunk a different name)
+
+            minChunks: Infinity,
+            // (with more entries, this ensures that no other module
+            //  goes into the vendor chunk)
+        })
+    ]
 };
 
 module.exports = config;