Improve bootstrap time

Author: ije

bundler/mod.ts

@@ -1,13 +1,14 @@
 import { dirname, join } from 'https://deno.land/[email protected]/path/mod.ts'
 import { ensureDir } from 'https://deno.land/[email protected]/fs/ensure_dir.ts'
-import { transform } from '../compiler/mod.ts'
+import { SourceType, transform } from '../compiler/mod.ts'
 import { trimBuiltinModuleExts } from '../framework/core/module.ts'
-import { ensureTextFile, existsFile, lazyRemove } from '../shared/fs.ts'
-import type { BrowserName, Module } from '../types.d.ts'
-import { VERSION } from '../version.ts'
+import { cssLoader } from '../plugins/css.ts'
 import type { DependencyGraph } from '../server/analyzer.ts'
 import type { Aleph } from '../server/aleph.ts'
 import { clearBuildCache, computeHash, getAlephPkgUri } from '../server/helper.ts'
+import { ensureTextFile, existsFile, lazyRemove } from '../shared/fs.ts'
+import type { BrowserName, Module } from '../types.d.ts'
+import { VERSION } from '../version.ts'
 import { esbuild, stopEsbuild, esmLoader } from './esbuild.ts'
 
 export const bundlerRuntimeCode = `
@@ -134,12 +135,22 @@ export class Bundler {
       return jsFile
     }
 
-    const source = await this.#aleph.resolveModuleSource(mod.specifier)
+    let source = await this.#aleph.resolveModuleSource(mod.specifier)
     if (source === null) {
       this.#compiled.delete(mod.specifier)
       throw new Error(`Unsupported module '${mod.specifier}'`)
     }
 
+    if (source.type === SourceType.CSS) {
+      const { code, map } = await cssLoader({ specifier: mod.specifier, data: source.code }, this.#aleph)
+      source = {
+        type: SourceType.JS,
+        code,
+        map
+      }
+      mod.isStyle = true
+    }
+
     try {
       let { code, starExports } = await transform(
         mod.specifier,

plugins/css.ts

@@ -206,7 +206,6 @@ export default (): Plugin => {
     name: 'css-loader',
     setup: aleph => {
       aleph.onResolve(test, () => ({ acceptHMR: true }))
-      aleph.onLoad(test, input => cssLoader(input, aleph))
     }
   }
 }

server/aleph.ts

@@ -1,4 +1,3 @@
-import { delay } from 'https://deno.land/[email protected]/async/delay.ts'
 import { dim } from 'https://deno.land/[email protected]/fmt/colors.ts'
 import { indexOf, copy, equals } from 'https://deno.land/[email protected]/bytes/mod.ts'
 import { ensureDir } from 'https://deno.land/[email protected]/fs/ensure_dir.ts'
@@ -31,7 +30,6 @@ import { createHtml, Renderer } from './renderer.ts'
 type ModuleSource = {
   code: string
   type: SourceType
-  isStyle: boolean
   map?: string
 }
 
@@ -523,21 +521,13 @@ export class Aleph implements IAleph {
   /** add a module by given path and optional source code. */
   async addModule(specifier: string, sourceCode: string): Promise<Module> {
     let sourceType = getSourceType(specifier)
-    let isStyle = false
     if (sourceType === SourceType.Unknown) {
       throw new Error("addModule: unknown souce type")
     }
-    if (sourceType === SourceType.CSS) {
-      const ret = await cssLoader({ specifier, data: (new TextEncoder).encode(sourceCode) }, this)
-      sourceCode = ret.code
-      sourceType = SourceType.JS
-      isStyle = true
-    }
     const module = await this.compile(specifier, {
       source: {
         code: sourceCode,
         type: sourceType,
-        isStyle,
       }
     })
     if (specifier.startsWith('pages/') || specifier.startsWith('api/')) {
@@ -1047,20 +1037,9 @@ export class Aleph implements IAleph {
       }
     }
 
-    if (sourceType === SourceType.CSS) {
-      isStyle = true
-      // todo: covert source map
-      const { code, type = 'js' } = await cssLoader({ specifier, data: sourceCode }, this)
-      if (type === 'js') {
-        sourceCode = code
-        sourceType = SourceType.JS
-      }
-    }
-
     return {
       code: sourceCode,
       type: sourceType,
-      isStyle,
       map: sourceMap ? sourceMap : undefined
     }
   }
@@ -1074,7 +1053,11 @@ export class Aleph implements IAleph {
     return module
   }
 
-  private async initModule(specifier: string, { source: customSource, forceRefresh, httpExternal }: CompileOptions = {}): Promise<[Module, ModuleSource | null]> {
+  /** init the module by given specifier, don't transpile the code when the returned `source` is equal to null */
+  private async initModule(
+    specifier: string,
+    { source: customSource, forceRefresh, httpExternal }: CompileOptions = {}
+  ): Promise<[Module, ModuleSource | null]> {
     let external = false
     let data: any = null
 
@@ -1161,19 +1144,14 @@ export class Aleph implements IAleph {
       } catch (e) { }
     }
 
-    const shouldLoad = !(
-      (isRemote && !this.#reloading && mod.sourceHash !== '') &&
-      await existsFile(cacheFp)
-    )
-    if (shouldLoad) {
+    if (!isRemote || this.#reloading || mod.sourceHash === '' || !await existsFile(cacheFp)) {
       try {
         const src = customSource || await this.resolveModuleSource(specifier, data)
         const sourceHash = computeHash(src.code)
         if (mod.sourceHash === '' || mod.sourceHash !== sourceHash) {
           mod.sourceHash = sourceHash
           source = src
         }
-        mod.isStyle = src.isStyle
       } catch (err) {
         defer(err)
         return [mod, null]
@@ -1205,6 +1183,14 @@ export class Aleph implements IAleph {
         return
       }
 
+      if (source.type === SourceType.CSS) {
+        const { code, map } = await cssLoader({ specifier, data: source.code }, this)
+        source.code = code
+        source.map = map
+        source.type = SourceType.JS
+        module.isStyle = true
+      }
+
       const ms = new Measure()
       const encoder = new TextEncoder()
       const { code, deps = [], denoHooks, ssrPropsFn, ssgPathsFn, starExports, jsxStaticClassNames, map } = await transform(specifier, source.code, {
@@ -1318,7 +1304,7 @@ export class Aleph implements IAleph {
           }
           depModule = mod
         }
-        if (depModule) {
+        if (!ignoreDeps && depModule) {
           const hash = depModule.hash || depModule.sourceHash
           if (hashLoc !== undefined) {
             if (await this.replaceDepHash(module, hashLoc, hash)) {

server/server.ts

@@ -122,6 +122,7 @@ export class Server {
           return
         }
 
+        // serve modules
         if (relPath.endsWith('.js')) {
           let module = aleph.findModule(({ jsFile }) => jsFile === relPath)
           if (!module && aleph.isDev) {
@@ -151,6 +152,7 @@ export class Server {
           }
         }
 
+        // serve other build files
         const filePath = join(aleph.buildDir, relPath)
         if (await existsFile(filePath)) {
           const info = Deno.lstatSync(filePath)