Add vendor code-splitting

.travis.yml

@@ -11,6 +11,7 @@ env:
   - BROWSER_STACK_USERNAME=matthewbrown17
   - CLOUDFLARE_ZONE=d3f68763e9e100672fc0e1800282ddbe
   - GOOGLE_ANALYTICS_TRACKING_ID=UA-90316486-1
+  - HOSTNAME=popcode.org
   - secure: oNSex8CSxFztUhsuIVREJmJTH2H3D+zW1Q8tckp717HyJQQ3j1cVd1FUPJpLYu8sYAxMbf1HrxGPYfXUfXAXPKcXK6eCoWVUfJ9sCjTPgI+IKNYWshOsZxgkpZDELqK02iXfiX2N9IBX9Ucf/QLrtcmVCx4uSOIwU0zlKTnZZKOIaVhZMh9WJl0zetMdnh4zwRwJ0JqN/NDbEq43gKC87BZsk09/j/2kq3soyIqLoTe4kzkOxpnQUYBlQaL0XgrjODnMxiL+7tvmNJXzMgYH5VgfjU8mSrA78JnmrakbQIMtTn53rCXNM+LD67RbvSWwiUwTT6Ve7hYNyriovfXqk3UKL5KoawThn6/SF4zFc8lma395OMbE2NVTU0VaOGZ5wiiQvVeZftg272RRFeAHRSRjERjO5+mAi65nKLEcO7uIIMVG/hVcKVUplo9yfQpLOJyPaVke3iLP74D5s0PLxROM11qwYhrEHk7uE5nhPhc8GADtUbEjIh/HbOeLDpsK0unjwbiQzqQ1P5kxx0Z33ISjraM4aIpMch6bL8kPLKXPxF3i/7J16NkTnbNic6W+O8IOCuHgHgt+7NVdt+NNgQyZJockS4FVdGg3yktgXCFlKwcBcQNMkud3pDhUnivGlK6XV5cZRb3G6Kx/DwpjWqW405lCIFLtyicqKZ/13FI=
   - secure: SfrceTUdcPMC9Jk7T9eIFVxDGdoOC9sUUg6nQX+3GerJ+vefoVFjspx/StYPr5Jci7NWqFCGns/8Ctu7eOK7p9lFnHeleuNGxKhotsmV2dfF3DjzkusuTisVhFMNKclVCxSSuQYswBZJ8ZUCdxMYq3XIyl5kfxD7t8Tb09cdeYWPw1SUkSdjMYbVUkL+Q+tidb4FudhIH5hZQ+gAAtRYidxG1esNj0cB1ITyN5eM3UkGM59/TFqvIGfolJEBJFW7gyeqedKlgiavdXVaEOvBk4kqu+2q7waMTYbCMPLBFNBBH7bEdPt4OA5hU5qlVuCMH7y3CKHOikSDiIBzLEIcx1cy1xmHzvxuDya340vW0IK8PnvSV2jp/3uy4XWc0SXq+zWAZTfHwYFObx32byo0pBTnx8CVkxdhwNZYwfCU7KIPHJ++WVpxTyx/BrJT5BkqmTbnccsJrpr75DNfm/lrthWjz66Es2sdZVb5Knn/ezfHyKP92hcl1jNhddkX4YWH1rZt5UYA1paQrsMgolKnt9oRBsaN5/2A5X+2hHzwDRSV20XP7d7ZLwDtUCsUQf7aMo5B4P6p3ElRGpLyA04YRm/x/aegQujVMrgdIKxZ/u/TtM0gPkkoeFcbDSrQq3PVEiOGMiDxKPrKMEE4f0nYqs6mpeyoBn6lSyCXDWhXcAo=
 cache:

gulpfile.js

@@ -149,6 +149,11 @@ gulp.task('purgeCache', () =>
     key: process.env.CLOUDFLARE_KEY,
   }).zones.purgeCache(
     process.env.CLOUDFLARE_ZONE,
-    {purge_everything: true},
+    {
+      files: [
+        `https://${process.env.HOSTNAME}/index.html`,
+        `https://${process.env.HOSTNAME}/application.css`,
+      ],
+    },
   ),
 );

package.json

@@ -212,9 +212,11 @@
     "gulp-concat": "^2.6.0",
     "gulp-postcss": "^7.0.0",
     "gulp-sourcemaps": "^2.6.0",
+    "html-webpack-plugin": "^2.30.1",
     "i18next-resource-store-loader": "^0.1.1",
     "immutable-devtools": "0.0.7",
     "imports-loader": "^0.7.1",
+    "inline-chunk-manifest-html-webpack-plugin": "^1.1.1",
     "json-loader": "^0.5.4",
     "karma": "^1.1.0",
     "karma-browserstack-launcher": "^1.1.1",
@@ -242,6 +244,7 @@
     "tape": "^4.6.3",
     "transform-loader": "^0.2.3",
     "webpack": "^3.1.0",
+    "webpack-chunk-hash": "^0.5.0",
     "webpack-dev-middleware": "^1.8.2",
     "webpack-hot-middleware": "^2.12.2"
   },
@@ -250,7 +253,7 @@
   },
   "bundlesize": [
     {
-      "path": "./dist/*application.js"
+      "path": "./dist/*.js"
     }
   ]
 }

src/static/index.html → src/html/index.html

@@ -14,6 +14,5 @@
         <div class="pop-throbber__image"></div>
       </div>
     </div>
-    <script src="application.js"></script>
   </body>
 </html>

webpack.config.js

@@ -6,6 +6,10 @@ const fs = require('fs');
 const path = require('path');
 const OfflinePlugin = require('offline-plugin');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
+const MD5ChunkHash = require('webpack-chunk-hash');
+const InlineChunkManifestHtmlPlugin =
+  require('inline-chunk-manifest-html-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 const webpack = require('webpack');
 const escapeRegExp = require('lodash/escapeRegExp');
 const startsWith = require('lodash/startsWith');
@@ -105,8 +109,34 @@ module.exports = (env = 'development') => {
       ],
       ServiceWorker: {navigateFallbackURL: '/'},
     }),
+    isProduction ?
+      new webpack.HashedModuleIdsPlugin() :
+      new webpack.NamedModulesPlugin(),
+    new MD5ChunkHash(),
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, 'src/html/index.html'),
+      chunksSortMode: 'dependency',
+    }),
+    new InlineChunkManifestHtmlPlugin(),
   ];
 
+  if (!isTest) {
+    plugins.push(
+      new webpack.optimize.CommonsChunkPlugin({
+        name: 'vendor',
+        minChunks({context}) {
+          if (!context) {
+            return false;
+          }
+          const isNodeModule = context.indexOf('node_modules') !== -1;
+          const isBowerComponent = context.indexOf('bower_components') !== -1;
+          return isNodeModule || isBowerComponent;
+        },
+      }),
+      new webpack.optimize.CommonsChunkPlugin({name: 'manifest'}),
+    );
+  }
+
   if (isProduction) {
     plugins.push(new webpack.optimize.UglifyJsPlugin({
       compress: {warnings: false},
@@ -119,8 +149,8 @@ module.exports = (env = 'development') => {
     entry: './src/application.js',
     output: {
       path: path.resolve(__dirname, './dist'),
-      filename: 'application.js',
-      sourceMapFilename: 'application.js.map',
+      filename: isProduction ? '[name].[chunkhash].js' : '[name].js',
+      chunkFilename: isProduction ? '[name].[chunkhash].js' : '[name].js',
     },
     module: {
       rules: [