diff --git a/src/api/dev.ts b/src/api/dev.ts index 36a53da..80c1ee3 100644 --- a/src/api/dev.ts +++ b/src/api/dev.ts @@ -224,11 +224,8 @@ class Watcher extends EventEmitter { }); this.proc.on('message', message => { - if (message.__sapper__ && message.event === 'basepath') { - this.emit('basepath', { - basepath: message.basepath - }); - } + if (!message.__sapper__) return; + this.emit(message.event, message); }); this.proc.on('exit', emitFatal); diff --git a/src/cli/dev.ts b/src/cli/dev.ts index cfc3414..8a5ffdd 100644 --- a/src/cli/dev.ts +++ b/src/cli/dev.ts @@ -2,6 +2,7 @@ import * as path from 'path'; import * as colors from 'ansi-colors'; import * as child_process from 'child_process'; import prettyMs from 'pretty-ms'; +import pb from 'pretty-bytes'; import { dev as _dev } from '../api/dev'; import * as events from '../api/interfaces'; @@ -44,6 +45,32 @@ export function dev(opts: { port: number, open: boolean }) { if (event.log) console.log(event.log); }); + watcher.on('preload', (event) => { + if (event.size > 25000) { + console.log(colors.bold.yellow(`${event.url} — large amount of preloaded data`)); + console.log(`${colors.bold(pb(event.size))} of data was preloaded in total, above the recommended limit of ${pb(25000)}`); + } + }); + + watcher.on('unused_data', (event) => { + console.log(colors.bold.yellow(`${event.url} — unused preloaded data`)); + console.log(`More data was returned from \`preload\` than was used during the initial render. Consider only returning essential data.`); + + event.discrepancies.forEach(discrepancy => { + console.log(`${colors.bold(discrepancy.file)} loaded ${colors.bold(pb(discrepancy.preloaded))}, of which ${discrepancy.rendered > 2 ? `only ${colors.bold(pb(discrepancy.rendered))}` : 'none'} was used. The following properties were not referenced:`); + + const slice = discrepancy.props.length > 12 + ? discrepancy.props.slice(0, 10) + : discrepancy.props; + + console.log(slice.map((prop: string) => `• ${prop}`).join('\n')); + + if (discrepancy.props.length > slice.length) { + console.log(`...and ${discrepancy.props.length - slice.length} more`); + } + }); + }); + watcher.on('build', (event: events.BuildEvent) => { if (event.errors.length) { console.log(`${colors.bold.red(`✗ ${event.type}`)}`);