Skip to content

Commit

Permalink
Avoid bundling next/script in the server build by default (#40013)
Browse files Browse the repository at this point in the history
We only use `if (child.type === Script)` on the server side to check the
element type, that's unnecessary because we can add a special flag for
that (`__nextScript` in this PR).

This reduces the server bundle by ~13kb if `next/script` is not imported
by the user.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the
feature request has been accepted for implementation before opening a
PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The examples guidelines are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
  • Loading branch information
shuding committed Aug 28, 2022
1 parent 47dc97c commit d592d20
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 4 deletions.
2 changes: 2 additions & 0 deletions packages/next/client/script.tsx
Expand Up @@ -215,4 +215,6 @@ function Script(props: ScriptProps): JSX.Element | null {
return null
}

Object.defineProperty(Script, '__nextScript', { value: true })

export default Script
12 changes: 8 additions & 4 deletions packages/next/pages/_document.tsx
Expand Up @@ -10,10 +10,10 @@ import type {
DocumentType,
NEXT_DATA,
} from '../shared/lib/utils'
import type { ScriptProps } from '../client/script'

import { BuildManifest, getPageFiles } from '../server/get-page-files'
import { cleanAmpPath } from '../server/utils'
import { htmlEscapeJsonString } from '../server/htmlescape'
import Script, { ScriptProps } from '../client/script'
import isError from '../lib/is-error'

import { HtmlContext } from '../shared/lib/html-context'
Expand Down Expand Up @@ -765,7 +765,10 @@ export class Head extends Component<HeadProps> {
{!hasCanonicalRel && (
<link
rel="canonical"
href={canonicalBase + cleanAmpPath(dangerousAsPath)}
href={
canonicalBase +
require('../server/utils').cleanAmpPath(dangerousAsPath)
}
/>
)}
{/* https://www.ampproject.org/docs/fundamentals/optimize_amp#optimize-the-amp-runtime-loading */}
Expand Down Expand Up @@ -871,7 +874,8 @@ function handleDocumentScriptLoaderItems(
React.Children.forEach(combinedChildren, (child: any) => {
if (!child) return

if (child.type === Script) {
// When using the `next/script` component, register it in script loader.
if (child.type?.__nextScript) {
if (child.props.strategy === 'beforeInteractive') {
scriptLoader.beforeInteractive = (
scriptLoader.beforeInteractive || []
Expand Down

0 comments on commit d592d20

Please sign in to comment.