Skip to content

Commit 71f7bcd

Browse files
Jordan Burkgregberge
Jordan Burk
authored and
gregberge
committed
fix(server): allow query-param cache busting in chunk names (#229)
1 parent 3628363 commit 71f7bcd

File tree

3 files changed

+153
-2
lines changed

3 files changed

+153
-2
lines changed

‎packages/server/__fixtures__/stats.json

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@
1313
"letters-B": "letters-B.js",
1414
"letters-C": "letters-C.js",
1515
"letters-D": "letters-D.js",
16+
"letters-E": [
17+
"letters-E.css?param",
18+
"letters-E.js?param"
19+
],
1620
"main": [
1721
"main.css",
1822
"main.js"
@@ -69,6 +73,26 @@
6973
"letters-D"
7074
]
7175
},
76+
{
77+
"name": "letters-E.css?param",
78+
"size": 517,
79+
"chunks": [
80+
"letters-E"
81+
],
82+
"chunkNames": [
83+
"letters-E"
84+
]
85+
},
86+
{
87+
"name": "letters-E.js?param",
88+
"size": 517,
89+
"chunks": [
90+
"letters-E"
91+
],
92+
"chunkNames": [
93+
"letters-E"
94+
]
95+
},
7296
{
7397
"name": "main.css",
7498
"size": 16,
@@ -219,6 +243,17 @@
219243
"children": {},
220244
"childAssets": {}
221245
},
246+
"letters-E": {
247+
"chunks": [
248+
"letters-E"
249+
],
250+
"assets": [
251+
"letters-E.css?param",
252+
"letters-E.js?param"
253+
],
254+
"children": {},
255+
"childAssets": {}
256+
},
222257
"moment": {
223258
"chunks": [],
224259
"assets": [],
@@ -298,4 +333,4 @@
298333
"name": "mini-css-extract-plugin node_modules/css-loader/index.js!src/client/main.css"
299334
}
300335
]
301-
}
336+
}

‎packages/server/src/ChunkExtractor.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,7 @@ class ChunkExtractor {
170170
createChunkAsset({ filename, chunk, type, linkType }) {
171171
return {
172172
filename,
173-
scriptType: extensionToScriptType(path.extname(filename).toLowerCase()),
173+
scriptType: extensionToScriptType(path.extname(filename).split('?')[0].toLowerCase()),
174174
chunk,
175175
url: this.resolvePublicUrl(filename),
176176
path: path.join(this.outputPath, filename),

‎packages/server/src/ChunkExtractor.test.js

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,15 @@ describe('ChunkExtrator', () => {
5757
`)
5858
})
5959

60+
it('should allow for query params in chunk names', () => {
61+
extractor.addChunk('letters-E')
62+
expect(extractor.getScriptTags()).toMatchInlineSnapshot(`
63+
"<script>window.__LOADABLE_REQUIRED_CHUNKS__ = [\\"letters-E\\"];</script>
64+
<script async data-chunk=\\"letters-E\\" src=\\"/dist/node/letters-E.js?param\\"></script>
65+
<script async data-chunk=\\"main\\" src=\\"/dist/node/main.js\\"></script>"
66+
`)
67+
})
68+
6069
it('should add extra props if specified', () => {
6170
extractor.addChunk('letters-A')
6271
expect(extractor.getScriptTags({ nonce: 'testnonce' }))
@@ -113,6 +122,31 @@ Array [
113122
`)
114123
})
115124

125+
it('should allow for query params in chunk names', () => {
126+
extractor.addChunk('letters-E')
127+
expect(extractor.getScriptElements()).toMatchInlineSnapshot(`
128+
Array [
129+
<script
130+
dangerouslySetInnerHTML={
131+
Object {
132+
"__html": "window.__LOADABLE_REQUIRED_CHUNKS__ = [\\"letters-E\\"];",
133+
}
134+
}
135+
/>,
136+
<script
137+
async={true}
138+
data-chunk="letters-E"
139+
src="/dist/node/letters-E.js?param"
140+
/>,
141+
<script
142+
async={true}
143+
data-chunk="main"
144+
src="/dist/node/main.js"
145+
/>,
146+
]
147+
`)
148+
})
149+
116150
it('should add extra props if specified', () => {
117151
extractor.addChunk('letters-A')
118152
expect(extractor.getScriptElements({ nonce: 'testnonce' }))
@@ -158,6 +192,14 @@ Array [
158192
`)
159193
})
160194

195+
it('should allow for query params in chunk names', () => {
196+
extractor.addChunk('letters-E')
197+
expect(extractor.getStyleTags()).toMatchInlineSnapshot(`
198+
"<link data-chunk=\\"letters-E\\" rel=\\"stylesheet\\" href=\\"/dist/node/letters-E.css?param\\">
199+
<link data-chunk=\\"main\\" rel=\\"stylesheet\\" href=\\"/dist/node/main.css\\">"
200+
`)
201+
})
202+
161203
it('should add extraProps if specified', () => {
162204
extractor.addChunk('letters-A')
163205
expect(extractor.getStyleTags({ nonce: 'testnonce' }))
@@ -241,6 +283,24 @@ Array [
241283
`)
242284
})
243285

286+
it('should allow for query params in chunk names', () => {
287+
extractor.addChunk('letters-E')
288+
expect(extractor.getStyleElements()).toMatchInlineSnapshot(`
289+
Array [
290+
<link
291+
data-chunk="letters-E"
292+
href="/dist/node/letters-E.css?param"
293+
rel="stylesheet"
294+
/>,
295+
<link
296+
data-chunk="main"
297+
href="/dist/node/main.css"
298+
rel="stylesheet"
299+
/>,
300+
]
301+
`)
302+
})
303+
244304
it('should add extraProps if specified', () => {
245305
extractor.addChunk('letters-A')
246306
expect(extractor.getStyleElements({ nonce: 'testnonce' }))
@@ -337,6 +397,18 @@ h1 {
337397
`)
338398
})
339399

400+
it('should allow for query params in chunk names', () => {
401+
extractor.addChunk('letters-E')
402+
expect(extractor.getLinkTags()).toMatchInlineSnapshot(`
403+
"<link data-chunk=\\"letters-E\\" rel=\\"preload\\" as=\\"style\\" href=\\"/dist/node/letters-E.css?param\\">
404+
<link data-chunk=\\"letters-E\\" rel=\\"preload\\" as=\\"script\\" href=\\"/dist/node/letters-E.js?param\\">
405+
<link data-chunk=\\"main\\" rel=\\"preload\\" as=\\"style\\" href=\\"/dist/node/main.css\\">
406+
<link data-chunk=\\"main\\" rel=\\"preload\\" as=\\"script\\" href=\\"/dist/node/main.js\\">
407+
<link data-parent-chunk=\\"main\\" rel=\\"preload\\" as=\\"script\\" href=\\"/dist/node/letters-C.js\\">
408+
<link data-parent-chunk=\\"main\\" rel=\\"prefetch\\" as=\\"script\\" href=\\"/dist/node/letters-D.js\\">"
409+
`)
410+
})
411+
340412
it('should add extraProps if specified', () => {
341413
extractor.addChunk('letters-A')
342414
expect(extractor.getLinkTags({ nonce: 'testnonce' }))
@@ -427,6 +499,50 @@ Array [
427499
`)
428500
})
429501

502+
it('should allow for query params in chunk names', () => {
503+
extractor.addChunk('letters-E')
504+
expect(extractor.getLinkElements()).toMatchInlineSnapshot(`
505+
Array [
506+
<link
507+
as="style"
508+
data-chunk="letters-E"
509+
href="/dist/node/letters-E.css?param"
510+
rel="preload"
511+
/>,
512+
<link
513+
as="script"
514+
data-chunk="letters-E"
515+
href="/dist/node/letters-E.js?param"
516+
rel="preload"
517+
/>,
518+
<link
519+
as="style"
520+
data-chunk="main"
521+
href="/dist/node/main.css"
522+
rel="preload"
523+
/>,
524+
<link
525+
as="script"
526+
data-chunk="main"
527+
href="/dist/node/main.js"
528+
rel="preload"
529+
/>,
530+
<link
531+
as="script"
532+
data-parent-chunk="main"
533+
href="/dist/node/letters-C.js"
534+
rel="preload"
535+
/>,
536+
<link
537+
as="script"
538+
data-parent-chunk="main"
539+
href="/dist/node/letters-D.js"
540+
rel="prefetch"
541+
/>,
542+
]
543+
`)
544+
})
545+
430546
it('should add extraProps if specified', () => {
431547
extractor.addChunk('letters-A')
432548
expect(extractor.getLinkElements({ nonce: 'testnonce' }))

0 commit comments

Comments
 (0)