fix(server): allow query-param cache busting in chunk names (#229)

gregberge · Feb 13, 2019 · 71f7bcd · 71f7bcd
1 parent 3628363
commit 71f7bcd
Show file tree

Hide file tree

Showing 3 changed files with 153 additions and 2 deletions.
diff --git a/packages/server/__fixtures__/stats.json b/packages/server/__fixtures__/stats.json
@@ -13,6 +13,10 @@
     "letters-B": "letters-B.js",
     "letters-C": "letters-C.js",
     "letters-D": "letters-D.js",
+    "letters-E": [
+      "letters-E.css?param",
+      "letters-E.js?param"
+    ],
     "main": [
       "main.css",
       "main.js"
@@ -69,6 +73,26 @@
         "letters-D"
       ]
     },
+    {
+      "name": "letters-E.css?param",
+      "size": 517,
+      "chunks": [
+        "letters-E"
+      ],
+      "chunkNames": [
+        "letters-E"
+      ]
+    },
+    {
+      "name": "letters-E.js?param",
+      "size": 517,
+      "chunks": [
+        "letters-E"
+      ],
+      "chunkNames": [
+        "letters-E"
+      ]
+    },
     {
       "name": "main.css",
       "size": 16,
@@ -219,6 +243,17 @@
       "children": {},
       "childAssets": {}
     },
+    "letters-E": {
+      "chunks": [
+        "letters-E"
+      ],
+      "assets": [
+        "letters-E.css?param",
+        "letters-E.js?param"
+      ],
+      "children": {},
+      "childAssets": {}
+    },
     "moment": {
       "chunks": [],
       "assets": [],
@@ -298,4 +333,4 @@
       "name": "mini-css-extract-plugin node_modules/css-loader/index.js!src/client/main.css"
     }
   ]
-}
+}
diff --git a/packages/server/src/ChunkExtractor.js b/packages/server/src/ChunkExtractor.js
@@ -170,7 +170,7 @@ class ChunkExtractor {
   createChunkAsset({ filename, chunk, type, linkType }) {
     return {
       filename,
-      scriptType: extensionToScriptType(path.extname(filename).toLowerCase()),
+      scriptType: extensionToScriptType(path.extname(filename).split('?')[0].toLowerCase()),
       chunk,
       url: this.resolvePublicUrl(filename),
       path: path.join(this.outputPath, filename),

diff --git a/packages/server/src/ChunkExtractor.test.js b/packages/server/src/ChunkExtractor.test.js
@@ -57,6 +57,15 @@ describe('ChunkExtrator', () => {
 `)
     })
 
+    it('should allow for query params in chunk names', () => {
+      extractor.addChunk('letters-E')
+      expect(extractor.getScriptTags()).toMatchInlineSnapshot(`
+"<script>window.__LOADABLE_REQUIRED_CHUNKS__ = [\\"letters-E\\"];</script>
+<script async data-chunk=\\"letters-E\\" src=\\"/dist/node/letters-E.js?param\\"></script>
+<script async data-chunk=\\"main\\" src=\\"/dist/node/main.js\\"></script>"
+`)
+    })
+
     it('should add extra props if specified', () => {
       extractor.addChunk('letters-A')
       expect(extractor.getScriptTags({ nonce: 'testnonce' }))
@@ -113,6 +122,31 @@ Array [
 `)
     })
 
+    it('should allow for query params in chunk names', () => {
+      extractor.addChunk('letters-E')
+      expect(extractor.getScriptElements()).toMatchInlineSnapshot(`
+Array [
+  <script
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "window.__LOADABLE_REQUIRED_CHUNKS__ = [\\"letters-E\\"];",
+      }
+    }
+  />,
+  <script
+    async={true}
+    data-chunk="letters-E"
+    src="/dist/node/letters-E.js?param"
+  />,
+  <script
+    async={true}
+    data-chunk="main"
+    src="/dist/node/main.js"
+  />,
+]
+`)
+    })
+
     it('should add extra props if specified', () => {
       extractor.addChunk('letters-A')
       expect(extractor.getScriptElements({ nonce: 'testnonce' }))
@@ -158,6 +192,14 @@ Array [
 `)
     })
 
+    it('should allow for query params in chunk names', () => {
+      extractor.addChunk('letters-E')
+      expect(extractor.getStyleTags()).toMatchInlineSnapshot(`
+"<link data-chunk=\\"letters-E\\" rel=\\"stylesheet\\" href=\\"/dist/node/letters-E.css?param\\">
+<link data-chunk=\\"main\\" rel=\\"stylesheet\\" href=\\"/dist/node/main.css\\">"
+`)
+    })
+
     it('should add extraProps if specified', () => {
       extractor.addChunk('letters-A')
       expect(extractor.getStyleTags({ nonce: 'testnonce' }))
@@ -241,6 +283,24 @@ Array [
 `)
     })
 
+    it('should allow for query params in chunk names', () => {
+      extractor.addChunk('letters-E')
+      expect(extractor.getStyleElements()).toMatchInlineSnapshot(`
+Array [
+  <link
+    data-chunk="letters-E"
+    href="/dist/node/letters-E.css?param"
+    rel="stylesheet"
+  />,
+  <link
+    data-chunk="main"
+    href="/dist/node/main.css"
+    rel="stylesheet"
+  />,
+]
+`)
+    })
+
     it('should add extraProps if specified', () => {
       extractor.addChunk('letters-A')
       expect(extractor.getStyleElements({ nonce: 'testnonce' }))
@@ -337,6 +397,18 @@ h1 {
 `)
     })
 
+    it('should allow for query params in chunk names', () => {
+      extractor.addChunk('letters-E')
+      expect(extractor.getLinkTags()).toMatchInlineSnapshot(`
+"<link data-chunk=\\"letters-E\\" rel=\\"preload\\" as=\\"style\\" href=\\"/dist/node/letters-E.css?param\\">
+<link data-chunk=\\"letters-E\\" rel=\\"preload\\" as=\\"script\\" href=\\"/dist/node/letters-E.js?param\\">
+<link data-chunk=\\"main\\" rel=\\"preload\\" as=\\"style\\" href=\\"/dist/node/main.css\\">
+<link data-chunk=\\"main\\" rel=\\"preload\\" as=\\"script\\" href=\\"/dist/node/main.js\\">
+<link data-parent-chunk=\\"main\\" rel=\\"preload\\" as=\\"script\\" href=\\"/dist/node/letters-C.js\\">
+<link data-parent-chunk=\\"main\\" rel=\\"prefetch\\" as=\\"script\\" href=\\"/dist/node/letters-D.js\\">"
+`)
+    })
+
     it('should add extraProps if specified', () => {
       extractor.addChunk('letters-A')
       expect(extractor.getLinkTags({ nonce: 'testnonce' }))
@@ -427,6 +499,50 @@ Array [
 `)
     })
 
+    it('should allow for query params in chunk names', () => {
+      extractor.addChunk('letters-E')
+      expect(extractor.getLinkElements()).toMatchInlineSnapshot(`
+Array [
+  <link
+    as="style"
+    data-chunk="letters-E"
+    href="/dist/node/letters-E.css?param"
+    rel="preload"
+  />,
+  <link
+    as="script"
+    data-chunk="letters-E"
+    href="/dist/node/letters-E.js?param"
+    rel="preload"
+  />,
+  <link
+    as="style"
+    data-chunk="main"
+    href="/dist/node/main.css"
+    rel="preload"
+  />,
+  <link
+    as="script"
+    data-chunk="main"
+    href="/dist/node/main.js"
+    rel="preload"
+  />,
+  <link
+    as="script"
+    data-parent-chunk="main"
+    href="/dist/node/letters-C.js"
+    rel="preload"
+  />,
+  <link
+    as="script"
+    data-parent-chunk="main"
+    href="/dist/node/letters-D.js"
+    rel="prefetch"
+  />,
+]
+`)
+    })
+
     it('should add extraProps if specified', () => {
       extractor.addChunk('letters-A')
       expect(extractor.getLinkElements({ nonce: 'testnonce' }))