Improve resource caching

@plotly/webpack-dash-dynamic-import/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plotly/webpack-dash-dynamic-import",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Webpack Plugin for Dynamic Import in Dash",
   "repository": {
     "type": "git",

@plotly/webpack-dash-dynamic-import/src/index.js

@@ -1,4 +1,16 @@
-const resolveImportSource = `\
+const fs = require('fs');
+
+function getFingerprint() {
+    const package = fs.readFileSync('./package.json');
+    const packageJson = JSON.parse(package);
+
+    const timestamp = Math.round(Date.now() / 1000);
+    const version = packageJson.version.replace(/[.]/g, '_');
+
+    return `"v${version}m${timestamp}"`;
+}
+
+const resolveImportSource = () => `\
 Object.defineProperty(__webpack_require__, 'p', {
     get: (function () {
         let script = document.currentScript;
@@ -15,15 +27,24 @@ Object.defineProperty(__webpack_require__, 'p', {
             return url;
         };
     })()
-});`
+});
+
+const __jsonpScriptSrc__ = jsonpScriptSrc;
+jsonpScriptSrc = function(chunkId) {
+    const srcFragments = __jsonpScriptSrc__(chunkId).split('.');
+    srcFragments.splice(-1, 0, ${getFingerprint()});
+
+    return srcFragments.join('.');
+}
+`
 
 class WebpackDashDynamicImport {
     apply(compiler) {
         compiler.hooks.compilation.tap('WebpackDashDynamicImport', compilation => {
             compilation.mainTemplate.hooks.requireExtensions.tap('WebpackDashDynamicImport > RequireExtensions', (source, chunk, hash) => {
                 return [
                     source,
-                    resolveImportSource
+                    resolveImportSource()
                 ]
             });
         });

dash/dash.py

@@ -541,12 +541,15 @@ def _relative_url_path(relative_package_path="", namespace=""):
 
             modified = int(os.stat(module_path).st_mtime)
 
-            return "{}_dash-component-suites/{}/{}?v={}&m={}".format(
+            return "{}_dash-component-suites/{}/{}.v{}m{}.{}".format(
                 self.config.requests_pathname_prefix,
                 namespace,
-                relative_package_path,
-                importlib.import_module(namespace).__version__,
+                '.'.join(relative_package_path.split('.')[:-1]),
+                importlib.import_module(namespace).__version__.replace(
+                    '.', '_'
+                ),
                 modified,
+                '.'.join(relative_package_path.split('.')[-1:]),
             )
 
         srcs = []
@@ -676,6 +679,18 @@ def _generate_meta_html(self):
 
     # Serve the JS bundles for each package
     def serve_component_suites(self, package_name, path_in_package_dist):
+        # Check if the resource has a fingerprint
+        res = re.match(
+            r'^(.*)[.]v\d+_\d+_\d+(-\w+[.]?\d+)?m\d{10}([.]js)$',
+            path_in_package_dist,
+        )
+
+        fingerprint = res is not None
+        # Resolve real resource name from fingerprinted resource path
+        path_in_package_dist = (
+            res[1] + res[3] if res is not None else path_in_package_dist
+        )
+
         if package_name not in self.registered_paths:
             raise exceptions.DependencyException(
                 "Error loading dependency.\n"
@@ -711,11 +726,28 @@ def serve_component_suites(self, package_name, path_in_package_dist):
             package.__path__,
         )
 
-        return flask.Response(
+        response = flask.Response(
             pkgutil.get_data(package_name, path_in_package_dist),
             mimetype=mimetype,
         )
 
+        if fingerprint:
+            # Fingerprinted resources are good forever (1 year)
+            # No need for ETag as the fingerprint changes with each build
+            response.cache_control.max_age = 31536000  # 1 year
+        else:
+            # Non-fingerprinted resources are given an ETag that
+            # will be used / check on future requests
+            response.add_etag()
+            tag = response.get_etag()[:1][0]
+
+            request_etag = flask.request.headers.get('If-None-Match')
+
+            if '"{}"'.format(tag) == request_etag:
+                response = flask.Response(None, status=304)
+
+        return response
+
     def index(self, *args, **kwargs):  # pylint: disable=unused-argument
         scripts = self._generate_scripts_html()
         css = self._generate_css_dist_html()

tests/unit/test_resources.py

@@ -37,7 +37,7 @@ def test_external(mocker):
     mocker.patch("dash_core_components._js_dist")
     mocker.patch("dash_html_components._js_dist")
     dcc._js_dist = _monkey_patched_js_dist  # noqa: W0212
-    dcc.__version__ = 1
+    dcc.__version__ = "1.0.0"
 
     app = dash.Dash(
         __name__, assets_folder="tests/assets", assets_ignore="load_after.+.js"
@@ -66,7 +66,7 @@ def test_internal(mocker):
     mocker.patch("dash_core_components._js_dist")
     mocker.patch("dash_html_components._js_dist")
     dcc._js_dist = _monkey_patched_js_dist  # noqa: W0212,
-    dcc.__version__ = 1
+    dcc.__version__ = "1.0.0"
 
     app = dash.Dash(
         __name__, assets_folder="tests/assets", assets_ignore="load_after.+.js"
@@ -83,10 +83,10 @@ def test_internal(mocker):
 
     assert resource == [
         "/_dash-component-suites/"
-        "dash_core_components/external_javascript.js?v=1&m=1",
+        "dash_core_components/external_javascript.v1_0_0m1.js",
         "/_dash-component-suites/"
-        "dash_core_components/external_css.css?v=1&m=1",
-        "/_dash-component-suites/" "dash_core_components/fake_dcc.js?v=1&m=1",
+        "dash_core_components/external_css.v1_0_0m1.css",
+        "/_dash-component-suites/" "dash_core_components/fake_dcc.v1_0_0m1.js",
     ]
 
     assert (