Refactor static assets for better caching / fingerprinting

billoneil · billoneil · commit 76e6ea310b20 · 2017-11-14T22:16:51.000-05:00
diff --git a/stubbornjava-common/src/main/java/com/stubbornjava/common/undertow/handlers/CustomHandlers.java b/stubbornjava-common/src/main/java/com/stubbornjava/common/undertow/handlers/CustomHandlers.java
@@ -4,7 +4,6 @@
 import java.io.File;
 import java.nio.file.Paths;
 import java.util.SortedMap;
-import java.util.concurrent.TimeUnit;
 
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
@@ -57,7 +56,7 @@ public static HttpHandler gzip(HttpHandler next) {
                   .setNext(next);
     }
 
-    public static HttpHandler resource(String prefix) {
+    public static HttpHandler resource(String prefix, int cacheTime) {
         ResourceManager resourceManager = null;
         if (Env.LOCAL == Env.get()) {
             String path = Paths.get(AssetsConfig.assetsRoot(), prefix).toString();
@@ -68,7 +67,7 @@ public static HttpHandler resource(String prefix) {
             resourceManager = new ClassPathResourceManager(CustomHandlers.class.getClassLoader(), prefix);
         }
         ResourceHandler handler = new ResourceHandler(resourceManager);
-        handler.setCacheTime((int)TimeUnit.HOURS.toSeconds(4));
+        handler.setCacheTime(cacheTime);
         return handler;
     }
 
diff --git a/stubbornjava-webapp/src/main/java/com/stubbornjava/webapp/StubbornJavaWebApp.java b/stubbornjava-webapp/src/main/java/com/stubbornjava/webapp/StubbornJavaWebApp.java
@@ -2,6 +2,8 @@
 
 import static com.stubbornjava.common.undertow.handlers.CustomHandlers.timed;
 
+import java.util.concurrent.TimeUnit;
+
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 
@@ -43,7 +45,7 @@ private static HttpHandler wrapWithMiddleware(HttpHandler handler) {
         .get("/", timed("getHome", PageRoutes::home))
         .get("/ping", timed("ping", PageRoutes::ping))
 
-        .get("/favicon.ico", timed("favicon", CustomHandlers.resource("images/")))
+        .get("/favicon.ico", timed("favicon", CustomHandlers.resource("images/", (int)TimeUnit.DAYS.toSeconds(30))))
         .get("robots.txt", timed("robots", PageRoutes::robots))
 
         .get("/posts/{slug}", timed("getPost", PostRoutes::getPost))
@@ -67,10 +69,7 @@ private static HttpHandler wrapWithMiddleware(HttpHandler handler) {
     ;
 
     private static final HttpHandler staticRoutes = new PathHandler(basicRoutes)
-        .addPrefixPath("/css", timed("getCss", CustomHandlers.resource("css/")))
-        .addPrefixPath("/js", timed("getJs", CustomHandlers.resource("js/")))
-        .addPrefixPath("/assets/fonts", timed("getJs", CustomHandlers.resource("fonts/")))
-        .addPrefixPath("/images", timed("getImages", CustomHandlers.resource("images/")))
+        .addPrefixPath("/assets", timed("getAssets", CustomHandlers.resource("", (int)TimeUnit.DAYS.toSeconds(30))))
     ;
 
     private static void startServer() {
diff --git a/stubbornjava-webapp/src/main/resources/application.conf b/stubbornjava-webapp/src/main/resources/application.conf
@@ -1,3 +1,5 @@
+assets.root = "ui/assets"
+
 db {
   url="jdbc:mysql://localhost:3306/stubbornjava"
   driver="com.mysql.jdbc.Driver"
diff --git a/stubbornjava-webapp/ui/package.json b/stubbornjava-webapp/ui/package.json
@@ -30,6 +30,7 @@
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
     "webpack": "^2.2.1",
+    "webpack-clean-obsolete-chunks": "^0.3.0",
     "webpack-config": "^7.0.0"
   },
   "scripts": {}
diff --git a/stubbornjava-webapp/ui/src/common/head.hbs b/stubbornjava-webapp/ui/src/common/head.hbs
@@ -3,4 +3,4 @@
 <meta http-equiv="x-ua-compatible" content="ie=edge"/>
 <meta name="description" content="{{#if metaDesc }}{{metaDesc}}{{/if}}"/>
 {{!-- <link rel="stylesheet" href="/css/3rdparty.css"/>--}}
-<link rel="stylesheet" href="/css/common.css"/>
+<link rel="stylesheet" href="/assets/css/common.css"/>
diff --git a/stubbornjava-webapp/ui/src/common/scripts.hbs b/stubbornjava-webapp/ui/src/common/scripts.hbs
@@ -1,3 +1,3 @@
 {{!-- <script async type="text/javascript" src="/js/3rdparty.js"></script> --}}
 {{!-- Making this script async breaks the jump to id functionality :( --}}
-<script type="text/javascript" src="/js/common.js"></script>
+<script type="text/javascript" src="/assets/js/common.js"></script>
diff --git a/stubbornjava-webapp/ui/src/posts/webpack-and-npm-for-simple-java-8-web-apps.hbs b/stubbornjava-webapp/ui/src/posts/webpack-and-npm-for-simple-java-8-web-apps.hbs
@@ -44,22 +44,22 @@
 <p>You should be able to clone the repo and run the <code>WebpackServer</code> example. As long as you run <code>webpack --progress --watch</code> everything should work locally. If there are issues loading assets try changing the <code>assets.root</code> property found <a href="https://github.com/StubbornJava/StubbornJava/blob/master/stubbornjava-examples/src/main/resources/application.conf#L2">here</a>. This is a hack to make files load faster in the IDE, for some reason even with native hooks turned on the IDE's are slow to pick up file changes. Here are screen shots of the four pages. If you are not a strong HTML / CSS developer consider using a <a href="/best-selling-html-css-themes-and-website-templates">site template</a> to make your website stand out.</p>
 
 <h2 class="anchored">home</h2>
-<div><img width=100% src="/images/homepage.png" /></div>
+<div><img width=100% src="/assets/images/homepage.png" /></div>
 <hr/>
 <br/>
 <br/>
 <br/>
 <h2 class="anchored">hello {name}</h2>
-<img width=100% src="/images/hello.png" />
+<img width=100% src="/assets/images/hello.png" />
 <hr/>
 <br/>
 <br/>
 <br/>
 <h2 class="anchored">Not Found</h2>
-<img width=100% src="/images/notfound.png" />
+<img width=100% src="/assets/images/notfound.png" />
 <hr/>
 <br/>
 <br/>
 <br/>
 <h2 class="anchored">Server Error</h2>
-<img width=100% src="/images/error.png" />
+<img width=100% src="/assets/images/error.png" />
diff --git a/stubbornjava-webapp/ui/src/widgets/nav/PenguinHQ_compressed.png b/stubbornjava-webapp/ui/src/widgets/nav/PenguinHQ_compressed.png
diff --git a/stubbornjava-webapp/ui/src/widgets/nav/header.hbs b/stubbornjava-webapp/ui/src/widgets/nav/header.hbs
@@ -1,6 +1,6 @@
 <nav class="navbar navbar-inverse navbar-expand fixed-top" role="navigation">
   <a class="navbar-brand logo" href="/">
-    <span class="align-middle"><img src="/images/PenguinHQ.png" height="40px"> Stubborn<span class="java">Java</span></span>
+    <span class="align-middle"><img src="/assets/images/PenguinHQ.png" height="40px"> Stubborn<span class="java">Java</span></span>
     {{!-- Add this SVG instead later. I can't get CSS to work --}}
     {{!-- <span>{{> templates/src/widgets/nav/logo }} Stubborn<span class="java">Java</span></span> --}}
   </a>
diff --git a/stubbornjava-webapp/ui/src/widgets/social/twitter/summary-card.hbs b/stubbornjava-webapp/ui/src/widgets/social/twitter/summary-card.hbs
@@ -2,4 +2,4 @@
 <meta name="twitter:site" content="@StubbornJava" />
 <meta name="twitter:title" content="{{title}}" />
 <meta name="twitter:description" content="{{desc}}" />
-<meta name="twitter:image" content="/images/PenguinHQ.png" />
+<meta name="twitter:image" content="https://www.stubbornjava.com/assets/images/PenguinHQ_compressed.png" />
diff --git a/stubbornjava-webapp/ui/webpack.config.js b/stubbornjava-webapp/ui/webpack.config.js
@@ -1,9 +1,11 @@
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var CopyWebpackPlugin = require('copy-webpack-plugin');
 var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+var CleanObsoleteChunks = require('webpack-clean-obsolete-chunks');
 
 var webpack = require('webpack');
 var path = require('path');
+var fs = require('fs');
 
 module.exports = {
     // The standard entry point and output config
@@ -16,8 +18,8 @@ module.exports = {
     },
     output: {
         path: __dirname + '/assets',
-        filename: 'js/[name].js',
-        chunkFilename: '[id].js',
+        filename: 'js/[name]-[hash].js',
+        chunkFilename: '[id]-[hash].js',
         publicPath: '/assets/'
     },
     module: {
@@ -57,7 +59,8 @@ module.exports = {
 
     // Use the plugin to specify the resulting filename (and add needed behavior to the compiler)
     plugins: [
-        new ExtractTextPlugin('css/[name].css'),
+        new CleanObsoleteChunks({deep: true}),
+        new ExtractTextPlugin('css/[name]-[hash].css'),
         new webpack.optimize.UglifyJsPlugin({minimize: true}),
         // This was breaking some java script that expected certain names
         // Specifically the counter names for line-numbers
@@ -69,7 +72,7 @@ module.exports = {
         new CopyWebpackPlugin([
             {
                 from: 'src/**/*.hbs',
-                to: './templates/'
+                to: './templates/',
             }
         ]),
         new webpack.ProvidePlugin({
@@ -82,7 +85,34 @@ module.exports = {
           Popper: ['popper.js', 'default'],
           Util: "exports-loader?Util!bootstrap/js/dist/util",
           Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
-       })
+       }),
+       // TODO: Fix this copied from https://github.com/webpack/webpack/issues/86#issuecomment-179957661
+       function () {
+            this.plugin("done", function (stats) {
+                var replaceInFile = function (filePath, toReplace, replacement) {
+                    var replacer = function (match) {
+                        console.log('Replacing in %s: %s => %s', filePath, match, replacement);
+                        return replacement
+                    };
+                    var str = fs.readFileSync(filePath, 'utf8');
+                    var out = str.replace(new RegExp(toReplace, 'g'), replacer);
+                    fs.writeFileSync(filePath, out);
+                };
+
+                var hash = stats.hash; // Build's hash, found in `stats` since build lifecycle is done.
+
+                replaceInFile(
+                  path.join(module.exports.output.path, 'templates/src/common/scripts.hbs'),
+                  'common(?:\-.+)?\.js',
+                  'common-' + hash + '.js'
+                );
+                replaceInFile(
+                  path.join(module.exports.output.path, 'templates/src/common/head.hbs'),
+                  'common(?:\-.+)?\.css',
+                  'common-' + hash + '.css'
+                );
+            });
+        }
     ],
 
     devtool: '#sourcemap',

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+assets.root = "ui/assets"`
	`2`	`+`
`1`	`3`	`db {`
`2`	`4`	`url="jdbc:mysql://localhost:3306/stubbornjava"`
`3`	`5`	`driver="com.mysql.jdbc.Driver"`