Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Optimize script tags #9048

Merged
merged 9 commits into from
Oct 16, 2019
Merged

Optimize script tags #9048

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
72fea63
Update _document.tsx to optimize script loading
atcastle Oct 11, 2019
c8c4f47
Update maxInitialChunks to 15
atcastle Oct 11, 2019
66f322c
Merge branch 'canary' into optimize-script-tags
Timer Oct 16, 2019
cfe2eae
Undo change chunk count
Timer Oct 16, 2019
22acf19
Adjust impl a bit
Timer Oct 16, 2019
56bb734
Add CSS preload test
Timer Oct 16, 2019
0790cf5
Ensure build manifest not preloaded
Timer Oct 16, 2019
5f473f8
Correct file name
Timer Oct 16, 2019
73a85fd
break comment
Timer Oct 16, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/next/build/webpack-config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -282,7 +282,7 @@ export default async function getBaseWebpackConfig(
reuseExistingChunk: true,
},
},
maxInitialRequests: 20,
maxInitialRequests: 15,
Timer marked this conversation as resolved.
Show resolved Hide resolved
},
}

Expand Down
53 changes: 32 additions & 21 deletions packages/next/pages/_document.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,24 +137,33 @@ export class Head extends Component<

context!: React.ContextType<typeof DocumentComponentContext>

getCssLinks() {
getCssLinks(): JSX.Element[] | null {
const { assetPrefix, files } = this.context._documentProps
const cssFiles =
files && files.length ? files.filter(f => /\.css$/.test(f)) : []
const cssLinkElements: JSX.Element[] = []
cssFiles.forEach(file => {
cssLinkElements.push(
<link
nonce={this.props.nonce}
rel="preload"
href={`${assetPrefix}/_next/${encodeURI(file)}`}
as="style"
crossOrigin={this.props.crossOrigin || process.crossOrigin}
/>
)
cssLinkElements.push(
<link
key={file}
nonce={this.props.nonce}
rel="stylesheet"
href={`${assetPrefix}/_next/${encodeURI(file)}`}
crossOrigin={this.props.crossOrigin || process.crossOrigin}
/>
)
}, [])

return cssFiles.length === 0
? null
: cssFiles.map((file: string) => {
return (
<link
key={file}
nonce={this.props.nonce}
rel="stylesheet"
href={`${assetPrefix}/_next/${encodeURI(file)}`}
crossOrigin={this.props.crossOrigin || process.crossOrigin}
/>
)
})
return cssFiles.length === 0 ? null : cssLinkElements
}

getPreloadDynamicChunks() {
Expand Down Expand Up @@ -189,23 +198,25 @@ export class Head extends Component<
)
}

getPreloadMainLinks() {
getPreloadMainLinks(): JSX.Element[] | null {
const { assetPrefix, files } = this.context._documentProps
if (!files || files.length === 0) {
return null
}
const { _devOnlyInvalidateCacheQueryString } = this.context

return files
.map((file: string) => {
.filter((file: string) => {
// `dynamicImports` will contain both `.js` and `.module.js` when the
// feature is enabled. This clause will filter down to the modern
// variants only.
// This also filters out non-JS assets.
if (!file.endsWith(getOptionalModernScriptVariant('.js'))) {
return null
}

// Also filter out buildManifest because it should not be preloaded for performance reasons
return (
file.endsWith(getOptionalModernScriptVariant('.js')) &&
!file.includes('buildManifest')
)
})
.map((file: string) => {
return (
<link
key={file}
Expand Down