Skip to content

Commit

Permalink
perf(nuxt): use granular watcher to avoid crawling ignored dirs (#20836)
Browse files Browse the repository at this point in the history
  • Loading branch information
@danielroe
danielroe committed May 18, 2023
1 parent ef8b5b5 commit 9dea9bc
Show file tree
Hide file tree
Showing 4 changed files with 103 additions and 44 deletions.
128 changes: 91 additions & 37 deletions packages/nuxt/src/core/builder.ts
View file
@@ -1,7 +1,8 @@
import { pathToFileURL } from 'node:url'
import type { EventType } from '@parcel/watcher'
import type { FSWatcher } from 'chokidar'
import chokidar from 'chokidar'
import { isIgnored, tryResolveModule } from '@nuxt/kit'
import { isIgnored, tryResolveModule, useNuxt } from '@nuxt/kit'
import { interopDefault } from 'mlly'
import { debounce } from 'perfect-debounce'
import { normalize } from 'pathe'
Expand Down Expand Up @@ -55,43 +56,20 @@ const watchEvents: Record<EventType, 'add' | 'addDir' | 'change' | 'unlink' | 'u

async function watch (nuxt: Nuxt) {
if (nuxt.options.experimental.watcher === 'parcel') {
if (nuxt.options.debug) {
console.time('[nuxt] builder:parcel:watch')
}
const watcherPath = await tryResolveModule('@parcel/watcher', [nuxt.options.rootDir, ...nuxt.options.modulesDir])
if (watcherPath) {
const { subscribe } = await import(pathToFileURL(watcherPath).href).then(interopDefault) as typeof import('@parcel/watcher')
for (const layer of nuxt.options._layers) {
if (!layer.config.srcDir) { continue }
const watcher = subscribe(layer.config.srcDir, (err, events) => {
if (err) { return }
for (const event of events) {
if (isIgnored(event.path)) { continue }
nuxt.callHook('builder:watch', watchEvents[event.type], normalize(event.path))
}
}, {
ignore: [
...nuxt.options.ignore,
'.nuxt',
'node_modules'
]
})
watcher.then((subscription) => {
if (nuxt.options.debug) {
console.timeEnd('[nuxt] builder:parcel:watch')
}
nuxt.hook('close', () => subscription.unsubscribe())
})
}
return
}
console.warn('[nuxt] falling back to `chokidar` as `@parcel/watcher` cannot be resolved in your project.')
const success = await createParcelWatcher()
if (success) { return }
}

if (nuxt.options.debug) {
console.time('[nuxt] builder:chokidar:watch')
if (nuxt.options.experimental.watcher === 'chokidar') {
return createWatcher()
}

return createGranularWatcher()
}

function createWatcher () {
const nuxt = useNuxt()

const watcher = chokidar.watch(nuxt.options._layers.map(i => i.config.srcDir as string).filter(Boolean), {
...nuxt.options.watchers.chokidar,
cwd: nuxt.options.srcDir,
Expand All @@ -103,12 +81,88 @@ async function watch (nuxt: Nuxt) {
]
})

watcher.on('all', (event, path) => nuxt.callHook('builder:watch', event, normalize(path)))
nuxt.hook('close', () => watcher.close())
}

function createGranularWatcher () {
const nuxt = useNuxt()

if (nuxt.options.debug) {
watcher.on('ready', () => console.timeEnd('[nuxt] builder:chokidar:watch'))
console.time('[nuxt] builder:chokidar:watch')
}

watcher.on('all', (event, path) => nuxt.callHook('builder:watch', event, normalize(path)))
nuxt.hook('close', () => watcher.close())
let pending = 0

const ignoredDirs = new Set([...nuxt.options.modulesDir, nuxt.options.buildDir])
const pathsToWatch = nuxt.options._layers.map(layer => layer.config.srcDir).filter(d => d && !isIgnored(d))
for (const path of nuxt.options.watch) {
if (typeof path !== 'string') { continue }
if (pathsToWatch.some(w => path.startsWith(w.replace(/[^/]$/, '$&/')))) { continue }
pathsToWatch.push(path)
}
for (const dir of pathsToWatch) {
pending++
const watcher = chokidar.watch(dir, { ...nuxt.options.watchers.chokidar, ignoreInitial: false, depth: 0, ignored: [isIgnored] })
const watchers: Record<string, FSWatcher> = {}

watcher.on('all', (event, path) => {
if (!pending) {
nuxt.callHook('builder:watch', event, normalize(path))
}
if (event === 'unlinkDir' && path in watchers) {
watchers[path].close()
delete watchers[path]
}
if (event === 'addDir' && path !== dir && !ignoredDirs.has(path) && !(path in watchers) && !isIgnored(path)) {
watchers[path] = chokidar.watch(path, { ...nuxt.options.watchers.chokidar, ignored: [isIgnored] })
watchers[path].on('all', (event, path) => nuxt.callHook('builder:watch', event, normalize(path)))
nuxt.hook('close', () => watchers[path].close())
}
})
watcher.on('ready', () => {
pending--
if (nuxt.options.debug && !pending) {
console.timeEnd('[nuxt] builder:chokidar:watch')
}
})
}
}

async function createParcelWatcher () {
const nuxt = useNuxt()
if (nuxt.options.debug) {
console.time('[nuxt] builder:parcel:watch')
}
const watcherPath = await tryResolveModule('@parcel/watcher', [nuxt.options.rootDir, ...nuxt.options.modulesDir])
if (watcherPath) {
const { subscribe } = await import(pathToFileURL(watcherPath).href).then(interopDefault) as typeof import('@parcel/watcher')
for (const layer of nuxt.options._layers) {
if (!layer.config.srcDir) { continue }
const watcher = subscribe(layer.config.srcDir, (err, events) => {
if (err) { return }
for (const event of events) {
if (isIgnored(event.path)) { continue }
nuxt.callHook('builder:watch', watchEvents[event.type], normalize(event.path))
}
}, {
ignore: [
...nuxt.options.ignore,
'.nuxt',
'node_modules'
]
})
watcher.then((subscription) => {
if (nuxt.options.debug) {
console.timeEnd('[nuxt] builder:parcel:watch')
}
nuxt.hook('close', () => subscription.unsubscribe())
})
}
return true
}
console.warn('[nuxt] falling back to `chokidar-granular` as `@parcel/watcher` cannot be resolved in your project.')
return false
}

async function bundle (nuxt: Nuxt) {
Expand Down
2 changes: 1 addition & 1 deletion packages/nuxt/src/core/schema.ts
View file
Expand Up @@ -76,7 +76,7 @@ export default defineNuxtModule({
}
return
}
console.warn('[nuxt] falling back to `chokidar` as `@parcel/watcher` cannot be resolved in your project.')
console.warn('[nuxt] falling back to `chokidar-granular` as `@parcel/watcher` cannot be resolved in your project.')
}

const filesToWatch = await Promise.all(nuxt.options._layers.map(layer =>
Expand Down
3 changes: 2 additions & 1 deletion packages/schema/src/config/common.ts
View file
Expand Up @@ -145,7 +145,7 @@ export default defineUntypedSchema({
* If a relative path is specified, it will be relative to your `rootDir`.
*/
analyzeDir: {
$resolve: async (val, get) => val
$resolve: async (val, get) => val
? resolve(await get('rootDir'), val)
: resolve(await get('buildDir'), 'analyze')
},
Expand Down Expand Up @@ -358,6 +358,7 @@ export default defineUntypedSchema({
'.output',
'.git',
await get('analyzeDir'),
await get('buildDir'),
await get('ignorePrefix') && `**/${await get('ignorePrefix')}*.*`
].concat(val).filter(Boolean)
},
Expand Down
14 changes: 9 additions & 5 deletions packages/schema/src/config/experimental.ts
View file
Expand Up @@ -161,15 +161,19 @@ export default defineUntypedSchema({
/**
* Set an alternative watcher that will be used as the watching service for Nuxt.
*
* Nuxt uses 'chokidar' by default, but by setting this to `parcel` it will use
* `@parcel/watcher` instead. This may improve performance in large projects or
* on Windows platforms.
* Nuxt uses 'chokidar-granular' by default, which will ignore top-level directories
* (like `node_modules` and `.git`) that are excluded from watching.
*
* You can set this instead to `parcel` to use `@parcel/watcher`, which may improve
* performance in large projects or on Windows platforms.
*
* You can also set this to `chokidar` to watch all files in your source directory.
*
* @see https://github.com/paulmillr/chokidar
* @see https://github.com/parcel-bundler/watcher
* @default chokidar
* @type {'chokidar' | 'parcel'}
* @type {'chokidar' | 'parcel' | 'chokidar-granular'}
*/
watcher: 'chokidar'
watcher: 'chokidar-granular'
}
})

0 comments on commit 9dea9bc

Please sign in to comment.