feat: add --dynamic flag to speed up building during development

Author: fengzilong

Diff for: .eslintrc

@@ -1,3 +1,7 @@
 {
-  "extends": "mo/esnext"
+  "extends": "mo/esnext",
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "allowImportExportEverywhere": true
+  }
 }

Diff for: examples/simple/package.json

@@ -4,7 +4,7 @@
   "version": "1.0.0",
   "description": "",
   "scripts": {
-    "dev": "node ../../packages/cli/bin/index.js --single-page=pages/home/home",
+    "dev": "node ../../packages/cli/bin/index.js --dynamic",
     "build": "node ../../packages/cli/bin/index.js --prod"
   },
   "keywords": [],

Diff for: package.json

@@ -49,6 +49,7 @@
   "devDependencies": {
     "@commitlint/cli": "8.0.0",
     "@commitlint/config-conventional": "8.0.0",
+    "babel-eslint": "^10.0.2",
     "eslint": "6.0.1",
     "eslint-config-mo": "0.5.2",
     "gh-pages": "2.0.1",

Diff for: packages/cli/bin/index.js

@@ -18,6 +18,7 @@ cli
   .command( '', 'Build in development mode' )
   .option( '--prod', 'Build in production mode' )
   .option( '--single-page <page>', 'Build single page to speed up' )
+  .option( '--dynamic' )
   .action( options => {
     options = normalizeCliOptions( options )
 

Diff for: packages/cli/lib/commands/dev.js

@@ -39,24 +39,12 @@ async function dev( cliOptions = {} ) {
   const host = nutConfig.host || DEFAULT_HOST
   const port = nutConfig.port || DEFAULT_PORT
 
-  let devServerOptions = {
-    contentBase: './dist',
-    host,
-    hot: true,
-    quiet: true,
-    headers: {
-      'Access-Control-Allow-Origin': '*',
-    },
-    historyApiFallback: true,
-  }
-
-  if ( nutConfig.devServer ) {
-    devServerOptions = Object.assign( devServerOptions, nutConfig.devServer )
-  }
+  const dynamicPages = []
 
   const modules = await generateVirtualModules( nutConfig, {
     env: 'dev',
     cliOptions,
+    dynamicPages,
   } )
 
   let virtualModules
@@ -81,6 +69,12 @@ async function dev( cliOptions = {} ) {
       return virtualModules
     } )
     .use( VirtualModulesPlugin, [ modules ] )
+  webpackConfig.plugin( 'define' )
+    .use( webpack.DefinePlugin, [
+      {
+        NUT_CLI_DYNAMIC: JSON.stringify( Boolean( cliOptions.dynamic ) )
+      }
+    ] )
 
   applyCSSRules( webpackConfig, 'dev', appId )
 
@@ -100,15 +94,95 @@ async function dev( cliOptions = {} ) {
     )
   }
 
-  WebpackDevServer.addDevServerEntrypoints( finalWebpackConfig, devServerOptions )
   const compiler = webpack( finalWebpackConfig )
-  const server = new WebpackDevServer( compiler, devServerOptions )
 
   compiler.hooks.done.tap( 'memory-usage', () => {
     const { heapUsed } = process.memoryUsage()
     console.log( chalk.gray( `\n${ prettyBytes( heapUsed ) } Memory Used\n` ) )
   } )
 
+  const waitCallbacks = []
+  compiler.hooks.done.tap( 'wait-until-valid', () => {
+    let callback = waitCallbacks.shift()
+    while ( callback ) {
+      callback()
+      callback = waitCallbacks.shift()
+    }
+  } )
+
+  function waitUntilValid() {
+    const deferred = {}
+
+    deferred.promise = new Promise( ( resolve, reject ) => {
+      deferred.resolve = resolve
+      deferred.reject = reject
+    } )
+
+    waitCallbacks.push( deferred.resolve )
+
+    return deferred.promise
+  }
+
+  let devServerOptions = {
+    contentBase: './dist',
+    host,
+    hot: true,
+    quiet: true,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+    },
+    historyApiFallback: true,
+    before( app ) {
+      app.get( `/_nut_dynamic_build_page`, async ( req, res ) => {
+        const page = req.query.page
+
+        if ( !cliOptions.dynamic ) {
+          return res.json( {
+            success: true,
+            waitHotApply: false,
+          } )
+        }
+
+        // prevent waiting for valid
+        if ( dynamicPages.includes( page ) ) {
+          return res.json( {
+            success: true,
+            waitHotApply: false,
+          } )
+        }
+
+        dynamicPages.push( page )
+
+        const modules = await generateVirtualModules( nutConfig, {
+          env: 'dev',
+          cliOptions,
+          dynamicPages,
+        } )
+
+        for ( const [ path, content ] of Object.entries( modules ) ) {
+          virtualModules.writeModule(
+            path,
+            content
+          )
+        }
+
+        await waitUntilValid()
+
+        res.json( {
+          success: true,
+          waitHotApply: true,
+        } )
+      } )
+    },
+  }
+
+  if ( nutConfig.devServer ) {
+    devServerOptions = Object.assign( devServerOptions, nutConfig.devServer )
+  }
+
+  WebpackDevServer.addDevServerEntrypoints( finalWebpackConfig, devServerOptions )
+  const server = new WebpackDevServer( compiler, devServerOptions )
+
   server.listen( port, host, () => {
     const routerMode = ( nutConfig.router && nutConfig.router.mode ) || 'hash'
 
@@ -201,6 +275,7 @@ async function dev( cliOptions = {} ) {
       const modules = await generateVirtualModules( nutConfig, {
         env: 'dev',
         cliOptions,
+        dynamicPages,
       } )
 
       for ( const [ path, content ] of Object.entries( modules ) ) {

Diff for: packages/cli/lib/commands/prod.js

@@ -96,6 +96,13 @@ async function productionify( webpackConfig, config, appId ) {
 
   webpackConfig.plugin( 'virtual-modules' )
     .use( VirtualModulesPlugin, [ modules ] )
+
+  webpackConfig.plugin( 'define' )
+    .use( webpack.DefinePlugin, [
+      {
+        NUT_CLI_DYNAMIC: JSON.stringify( false )
+      }
+    ] )
 }
 
 async function prod() {

Diff for: packages/cli/lib/runtime/core/router.js

@@ -1,5 +1,6 @@
 import qs from 'query-string'
 import normalizeRoute from '../utils/normalize-route'
+import dynamicBuild from '../utils/dynamic-build'
 
 export default function ( pages, rootRouter ) {
   return {
@@ -82,22 +83,36 @@ export default function ( pages, rootRouter ) {
       return url
     },
 
-    push( route = '', options = {}, callback ) {
+    async push( route = '', options = {}, callback ) {
       const path = this.format( route, options )
       if ( !path ) {
         return
       }
+
+      await dynamicBuild( this.matchPage( path ) )
+
       rootRouter.push( path, callback )
     },
 
-    replace( route = '', options = {}, callback ) {
+    async replace( route = '', options = {}, callback ) {
       const path = this.format( route, options )
       if ( !path ) {
         return
       }
+
+      await dynamicBuild( this.matchPage( path ) )
+
       rootRouter.replace( path, callback )
     },
 
+    matchPage( ...args ) {
+      const matched = rootRouter.match( ...args )
+
+      if ( matched ) {
+        return matched && matched.options && matched.options.page
+      }
+    },
+
     match( ...args ) {
       return rootRouter.match( ...args )
     },

Diff for: packages/cli/lib/runtime/entries/single.js

@@ -21,6 +21,9 @@ import registerLayouts from '../steps/register-layouts'
 
 import getFirstRoute from '../utils/get-first-route'
 import switchTheme from '../utils/switch-theme'
+// fix __webpack_require__.e is not defined in dynamic build mode
+import '../utils/add-require-ensure'
+import dynamicBuild from '../utils/dynamic-build'
 
 import app from '@/nut-auto-generated-app'
 import createAPI from '../context/api'
@@ -109,22 +112,26 @@ import use from '../context/use'
     }
   }
 
+  const matched = rootRouter.match()
+  const matchedPage = matched && matched.options && matched.options.page
+
+  await dynamicBuild( matchedPage )
+
   nico.start( '#app' )
   events.emit( 'route:enabled', context )
 
-  const matched = rootRouter.match()
   if ( !matched || ( matched.router === rootRouter ) ) {
     const homeMatched = rootRouter.match( '/' )
 
     if (
       homeMatched &&
       ( homeMatched.router !== rootRouter )
     ) {
-      rootRouter.push( '/' )
+      context.api.router.push( '/' )
     } else {
       const firstRoute = getFirstRoute( context )
       if ( firstRoute ) {
-        rootRouter.push( firstRoute )
+        context.api.router.push( firstRoute )
       }
     }
   }

Diff for: packages/cli/lib/runtime/utils/add-require-ensure.js

@@ -0,0 +1,3 @@
+export default () => {
+  return import( './dynamic-import-fixture' )
+}

Diff for: packages/cli/lib/runtime/utils/dynamic-build.js

@@ -0,0 +1,61 @@
+/* global NUT_CLI_DYNAMIC, fetch */
+function onHMRStatusTransferTo( condition = () => false, callback = () => {} ) {
+  if ( module.hot ) {
+    /* eslint-disable */
+    function handler( status ) {
+      if ( condition( status ) === true ) {
+        module.hot.removeStatusHandler( handler )
+        callback()
+      }
+    }
+    /* eslint-enable */
+
+    module.hot.addStatusHandler( handler )
+  }
+}
+
+// trigger dynamic build before route lifecycle enter
+async function dynamicBuild( page ) {
+  if ( !NUT_CLI_DYNAMIC || ( process.env.NODE_ENV === 'production' ) ) {
+    return
+  }
+
+  if ( module.hot && page ) {
+    const promise = new Promise( resolve => {
+      if ( module.hot.status() === 'idle' ) {
+        onHMRStatusTransferTo(
+          status => status !== 'idle',
+          () => {
+            onHMRStatusTransferTo(
+              status => status === 'idle',
+              () => {
+                resolve()
+              }
+            )
+          }
+        )
+      } else {
+        onHMRStatusTransferTo(
+          status => status === 'idle',
+          resolve
+        )
+      }
+    } )
+
+    let json
+    try {
+      const response = await fetch( `/_nut_dynamic_build_page?page=${
+        encodeURIComponent( page )
+      }` )
+      json = await response.json()
+    } catch ( e ) {
+      console.log( e )
+    }
+
+    if ( json.success && ( json.waitHotApply === true ) ) {
+      await promise
+    }
+  }
+}
+
+export default dynamicBuild

Diff for: packages/cli/lib/runtime/utils/dynamic-import-fixture.js

@@ -0,0 +1 @@
+export default () => {}