Improve load performance

package.json

@@ -104,6 +104,7 @@
     "@types/babel__traverse": "^7.0.7",
     "@types/cacache": "^12.0.1",
     "@types/compressible": "^2.0.0",
+    "@types/css-modules-loader-core": "^1.1.0",
     "@types/es-module-lexer": "^0.3.0",
     "@types/etag": "^1.8.0",
     "@types/http-proxy": "^1.17.4",

src/commands/build-util.ts

@@ -1,12 +1,12 @@
-import Core from 'css-modules-loader-core';
+import type CSSModuleLoader from 'css-modules-loader-core';
 import type {EventEmitter} from 'events';
 import execa from 'execa';
-import path from 'path';
 import {statSync} from 'fs';
 import npmRunPath from 'npm-run-path';
+import path from 'path';
 import {
-  SnowpackConfig,
   BuildScript,
+  SnowpackConfig,
   SnowpackPluginBuildArgs,
   SnowpackPluginBuildResult,
 } from '../config';
@@ -53,6 +53,7 @@ export function wrapImportMeta({
   );
 }
 
+let _cssModuleLoader: CSSModuleLoader;
 export async function wrapCssModuleResponse({
   url,
   code,
@@ -66,8 +67,8 @@ export async function wrapCssModuleResponse({
   hasHmr?: boolean;
   config: SnowpackConfig;
 }) {
-  let core = new Core();
-  const {injectableSource, exportTokens} = await core.load(code, url, () => {
+  _cssModuleLoader = _cssModuleLoader || new (require('css-modules-loader-core'))();
+  const {injectableSource, exportTokens} = await _cssModuleLoader.load(code, url, undefined, () => {
     throw new Error('Imports in CSS Modules are not yet supported.');
   });
   return `

src/commands/dev.ts

@@ -26,7 +26,6 @@
 
 import cacache from 'cacache';
 import chalk from 'chalk';
-import chokidar from 'chokidar';
 import isCompressible from 'compressible';
 import etag from 'etag';
 import {EventEmitter} from 'events';
@@ -874,50 +873,6 @@ export async function command(commandOptions: CommandOptions) {
     }
   }
 
-  // Watch src files
-  async function onWatchEvent(fileLoc) {
-    handleHmrUpdate(fileLoc);
-    inMemoryBuildCache.delete(fileLoc);
-    filesBeingDeleted.add(fileLoc);
-    await cacache.rm.entry(BUILD_CACHE, fileLoc);
-    filesBeingDeleted.delete(fileLoc);
-  }
-  const watcher = chokidar.watch(
-    mountedDirectories.map(([dirDisk]) => dirDisk),
-    {
-      ignored: config.exclude,
-      persistent: true,
-      ignoreInitial: true,
-      disableGlobbing: false,
-    },
-  );
-  watcher.on('add', (fileLoc) => onWatchEvent(fileLoc));
-  watcher.on('change', (fileLoc) => onWatchEvent(fileLoc));
-  watcher.on('unlink', (fileLoc) => onWatchEvent(fileLoc));
-
-  // Watch node_modules & rerun snowpack install if symlinked dep updates
-  const symlinkedFileLocs = new Set(
-    Object.keys(dependencyImportMap.imports)
-      .map((specifier) => {
-        const packageName = getPackageNameFromSpecifier(specifier);
-        return resolveDependencyManifest(packageName, cwd);
-      }) // resolve symlink src location
-      .filter(([_, packageManifest]) => packageManifest && !packageManifest['_id']) // only watch symlinked deps for now
-      .map(([fileLoc]) => `${path.dirname(fileLoc!)}/**`),
-  );
-  function onDepWatchEvent() {
-    reinstallDependencies().then(() => hmrEngine.broadcastMessage({type: 'reload'}));
-  }
-  const depWatcher = chokidar.watch([...symlinkedFileLocs], {
-    cwd: '/', // we’re using absolute paths, so watch from root
-    persistent: true,
-    ignoreInitial: true,
-    disableGlobbing: false,
-  });
-  depWatcher.on('add', onDepWatchEvent);
-  depWatcher.on('change', onDepWatchEvent);
-  depWatcher.on('unlink', onDepWatchEvent);
-
   onProcessExit(() => {
     hmrEngine.disconnectAllClients();
   });
@@ -977,6 +932,56 @@ export async function command(commandOptions: CommandOptions) {
     },
   });
 
+  // Open the user's browser
   if (open !== 'none') await openInBrowser(protocol, port, open);
+
+  // Start watching the file system.
+  // Defer "chokidar" loading to here, to reduce impact on overall startup time
+  const chokidar = await import('chokidar');
+
+  // Watch src files
+  async function onWatchEvent(fileLoc) {
+    handleHmrUpdate(fileLoc);
+    inMemoryBuildCache.delete(fileLoc);
+    filesBeingDeleted.add(fileLoc);
+    await cacache.rm.entry(BUILD_CACHE, fileLoc);
+    filesBeingDeleted.delete(fileLoc);
+  }
+  const watcher = chokidar.watch(
+    mountedDirectories.map(([dirDisk]) => dirDisk),
+    {
+      ignored: config.exclude,
+      persistent: true,
+      ignoreInitial: true,
+      disableGlobbing: false,
+    },
+  );
+  watcher.on('add', (fileLoc) => onWatchEvent(fileLoc));
+  watcher.on('change', (fileLoc) => onWatchEvent(fileLoc));
+  watcher.on('unlink', (fileLoc) => onWatchEvent(fileLoc));
+
+  // Watch node_modules & rerun snowpack install if symlinked dep updates
+  const symlinkedFileLocs = new Set(
+    Object.keys(dependencyImportMap.imports)
+      .map((specifier) => {
+        const packageName = getPackageNameFromSpecifier(specifier);
+        return resolveDependencyManifest(packageName, cwd);
+      }) // resolve symlink src location
+      .filter(([_, packageManifest]) => packageManifest && !packageManifest['_id']) // only watch symlinked deps for now
+      .map(([fileLoc]) => `${path.dirname(fileLoc!)}/**`),
+  );
+  function onDepWatchEvent() {
+    reinstallDependencies().then(() => hmrEngine.broadcastMessage({type: 'reload'}));
+  }
+  const depWatcher = chokidar.watch([...symlinkedFileLocs], {
+    cwd: '/', // we’re using absolute paths, so watch from root
+    persistent: true,
+    ignoreInitial: true,
+    disableGlobbing: false,
+  });
+  depWatcher.on('add', onDepWatchEvent);
+  depWatcher.on('change', onDepWatchEvent);
+  depWatcher.on('unlink', onDepWatchEvent);
+
   return new Promise(() => {});
 }