Add Proper Chunk Caching

Author: consindo

.gitignore

@@ -56,4 +56,5 @@ dist/generated/*
 *.sublime-workspace
 
 *report.html
-*report.json
+*report.json
+assets.json

dist/template.pug

@@ -48,9 +48,9 @@ html(lang="en")
     div(id="app")
       noscript DYMAJO Transit requires JavaScript to be enabled.
 
-    script(src="/generated/vendor.bundle.js")
-    script(src="/generated/app.bundle.js")
+    script(src=vendorpath)
+    script(src=apppath)
     script
         include ga.template
     script(async src="https://www.google-analytics.com/analytics.js")
-    script(async src="/generated/analytics.bundle.js")
+    script(async src=analyticspath)

package-lock.json

@@ -46,6 +46,7 @@
     "node-sass": "^4.5.3",
     "webpack": "^3.4.1",
     "webpack-bundle-analyzer": "^2.9.0",
+    "webpack-manifest-plugin": "^1.3.1",
     "whatwg-fetch": "^2.0.1"
   },
   "dependencies": {

package.json

@@ -2,6 +2,7 @@ const station = require('./station')
 const line = require('./line')
 const pug = require('pug')
 const template = pug.compileFile('./dist/template.pug')
+const manifest = require('../dist/assets.json')
 
 const defaultName = ' - Transit'
 
@@ -15,14 +16,20 @@ const staticrender = {
     const notFound = function() {
       res.status(404).send(template({
         title: 'Not Found - Transit',
-        description: 'Sorry, but the page you were trying to view does not exist.'
+        description: 'Sorry, but the page you were trying to view does not exist.',
+        vendorpath: '/' + manifest['vendor.js'],
+        apppath: '/' + manifest['app.js'],
+        analyticspath: '/' + manifest['analytics.js'],
       }))
     }
     const success = function() {
       res.send(template({
         title: title,
         description: description,
-        canonical: canonical
+        canonical: canonical,
+        vendorpath: '/' + manifest['vendor.js'],
+        apppath: '/' + manifest['app.js'],
+        analyticspath: '/' + manifest['analytics.js'],
       }))
     }
 

server/staticrender.js

@@ -2,6 +2,7 @@
 const webpack = require('webpack')
 const path = require('path')
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+const ManifestPlugin = require('webpack-manifest-plugin')
 
 const ConsoleNotifierPlugin = function () {}
 
@@ -26,7 +27,7 @@ let config = {
     path: __dirname + '/dist/',
     publicPath: '/',
     filename: 'generated/[name].bundle.js',
-    chunkFilename: 'generated/[id].chunk.js'
+    chunkFilename: 'generated/[id].chunk.js',
   },
   devtool: 'eval-source-map',
   module: {
@@ -55,10 +56,15 @@ let config = {
       name: 'app',
       async: true,
       minChunks: 2
+    }),
+    new ManifestPlugin({
+      fileName: 'assets.json',
     })
   ]
 }
 if (process.env.NODE_ENV === 'production') {
+  config.output.filename = 'generated/[name].[chunkhash].bundle.js'
+  config.output.chunkFilename = 'generated/[name].[chunkhash].chunk.js'
   delete config.devtool
   config.plugins.push(
     new webpack.optimize.UglifyJsPlugin({