archive-gh-me/loadable-components
1
0
Fork 0
mirror of https://github.com/gregberge/loadable-components.git synced 2026-01-18 15:12:26 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jordan Burk 2019-02-13 06:10:50 -08:00 committed by Greg Bergé
parent 362836327c
commit 71f7bcd424
3 changed files with 153 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
packages/server/__fixtures__/stats.json
View File

@ -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"
}
]
}
}

2
packages/server/src/ChunkExtractor.js
View File

@ -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),

116
packages/server/src/ChunkExtractor.test.js
View File

@ -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' }))