Skip to content
Permalink
Browse files
Optimize component type filters (#34941)
Since we are applying this loader to more files, and these two simple RegExp filters will be executed ~70 times per entry, it's an easy optimization to move the RegExp creation outside and merge related testers into the RegExp.

## 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 `yarn lint`
  • Loading branch information
shuding committed Mar 1, 2022
1 parent b6b5250 commit 9c0c93eb162cec0a5dacb355e5ff70794f3f9f46
Showing with 18 additions and 29 deletions.
  1. +18 −29 packages/next/build/webpack/loaders/next-flight-server-loader.ts
@@ -5,38 +5,27 @@ import { parse } from '../../swc'
import { getBaseSWCOptions } from '../../swc/options'
import { getRawPageExtensions } from '../../utils'

const createClientComponentFilter =
(pageExtensions: string[]) => (importSource: string) => {
const hasClientExtension = new RegExp(
`\\.client(\\.(${pageExtensions.join('|')}))?`
).test(importSource)
// Special cases for Next.js APIs that are considered as client components:
return (
hasClientExtension ||
isNextComponent(importSource) ||
isImageImport(importSource)
)
}

const createServerComponentFilter =
(pageExtensions: string[]) => (importSource: string) => {
return new RegExp(`\\.server(\\.(${pageExtensions.join('|')}))?`).test(
importSource
)
}

function isNextComponent(importSource: string) {
return (
importSource.includes('next/link') || importSource.includes('next/image')
const imageExtensions = ['jpg', 'jpeg', 'png', 'webp', 'avif']

const createClientComponentFilter = (pageExtensions: string[]) => {
// Special cases for Next.js APIs that are considered as client components:
// - .client.[ext]
// - next/link, next/image
// - .[imageExt]
const regex = new RegExp(
'(' +
`\\.client(\\.(${pageExtensions.join('|')}))?|` +
`next/link|next/image|` +
`\\.(${imageExtensions.join('|')})` +
')$'
)

return (importSource: string) => regex.test(importSource)
}

function isImageImport(importSource: string) {
// TODO: share extension with next/image
// TODO: add other static assets, jpeg -> jpg
return ['jpg', 'jpeg', 'png', 'webp', 'avif'].some((imageExt) =>
importSource.endsWith('.' + imageExt)
)
const createServerComponentFilter = (pageExtensions: string[]) => {
const regex = new RegExp(`\\.server(\\.(${pageExtensions.join('|')}))?$`)
return (importSource: string) => regex.test(importSource)
}

async function parseImportsInfo({

0 comments on commit 9c0c93e

Please sign in to comment.