feat: 支持 batch-update 提升页面 TBT 指标

controller/index.js

@@ -170,7 +170,16 @@ export default class Controller {
 
   disableEarlyHints = false
 
-  earlyHintsLinks = []
+  earlyHintsLinks = [{
+    uri: `vendor.js`,
+    rel: 'preload',
+    as: 'script',
+  },
+  {
+    uri: `index.js`,
+    rel: 'preload',
+    as: 'script',
+  }]
 
   addEarlyHintsLinks(earlyHints) {
     this.earlyHintsLinks = this.earlyHintsLinks.concat(earlyHints)
@@ -181,19 +190,6 @@ export default class Controller {
       return
     }
 
-    const presetEarlyHints = [
-      {
-        uri: `${this.context.publicPath}/${this.context.assets.vendor}`,
-        rel: 'preload',
-        as: 'script',
-      },
-      {
-        uri: `${this.context.publicPath}/${this.context.assets.index}`,
-        rel: 'preload',
-        as: 'script',
-      },
-    ]
-
     const preloadEarlyHints = this.SSR !== false ? [] : Object.keys(this.preload ?? {}).map((name) => {
       return {
         uri: this.getClientAssetFullPath(this.preload[name]),
@@ -212,7 +208,7 @@ export default class Controller {
       }
     })
 
-    const link = [...presetEarlyHints, ...preloadEarlyHints, ...earlyHintsLinks].map((item) => {
+    const link = [...preloadEarlyHints, ...earlyHintsLinks].map((item) => {
       const { uri, ...rest } = item
       const result = [`<${uri}>`]
 
@@ -650,12 +646,18 @@ export default class Controller {
     }
 
     if (store) {
-      let unsubscribe = store.subscribe(data => {
-        this.refreshView()
+      let refresh = (data) => {
+        this.refreshView && this.refreshView()
         if (this.stateDidChange) {
           this.stateDidChange(data)
         }
-      })
+      }
+
+      if (!this.disableBatchRefresh) {
+        refresh = _.debounce(refresh, 5)
+      }
+
+      let unsubscribe = store.subscribe(refresh)
       meta.unsubscribeList.push(unsubscribe)
     }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-imvc",
-  "version": "2.10.19",
+  "version": "2.10.20",
   "description": "An Isomorphic MVC Framework",
   "main": "./index",
   "bin": {

project/src/batch-refresh/Controller.tsx

@@ -0,0 +1,69 @@
+import Controller from '../../../controller'
+import useCtrl from '../../../hook/useCtrl'
+import React, { useState } from 'react'
+
+declare global {
+    module NodeJS {
+        interface Global {
+            controller: any
+        }
+    }
+    interface Window {
+        controller: any
+    }
+}
+
+export default class BatchRefreshController extends Controller {
+    View = View
+    constructor(location: any, context: any) {
+        super(location, context)
+        if (context.isClient) {
+            window.controller = this
+        } else if (context.isServer) {
+            global.controller = this
+        }
+    }
+    initialState = {
+        count: 0
+    }
+    // 选择是否禁用防抖刷新
+    disableBatchRefresh: boolean = true
+    handleIncre = () => {
+        setTimeout(() => {
+            // 重复调用多次，只会触发一次更新
+            this.store.actions.UPDATE_STATE({
+                count: this.store.getState().count + 1
+            })
+            this.store.actions.UPDATE_STATE({
+                count: this.store.getState().count + 1
+            })
+        }, 0)
+    }
+}
+
+
+function View({ state }: any) {
+    const ctrl = useCtrl()
+    const [count, setCount] = useState(0)
+
+    const handleIncre = () => {
+        setTimeout(() => {
+            setCount(count => count + 1)
+            setCount(count => count + 1)
+        }, 0)
+    }
+
+
+    console.log('render', state.count, count)
+    return (
+        <div id="debounce-refresh">
+            <div id="count">{state.count}</div>
+            <button id="ctrl-incre" onClick={ctrl.handleIncre}>
+                ctrl.incre
+            </button>
+            <button id="state-incre" onClick={handleIncre}>
+                state.incre
+            </button>
+        </div>
+    )
+}

project/src/index.js

@@ -38,5 +38,9 @@ export default [
 	{
 		path: '/prefetch-header',
 		controller: () => import('./prefetch-header/Controller')
+	},
+	{
+		path: '/batch-refresh',
+		controller: () => import('./batch-refresh/Controller')
 	}
 ]

project/start.js

@@ -5,7 +5,7 @@ const ROOT = __dirname
 const config = {
 	root: ROOT, // 项目根目录
 	port: PORT, // server 端口号
-	basename: ['/a', '/b'],
+	// basename: ['/a', '/b'],
 	routes: 'routes', // 服务端路由目录
 	layout: 'Layout', // 自定义 Layout
 	staticPath: '/my_static', // 静态资源目录

util/index.ts

@@ -7,7 +7,8 @@ export default {
   isThenable,
   setValueByPath,
   getValueByPath,
-  getFlatList
+  getFlatList,
+  debounce
 }
 
 interface Route {
@@ -122,3 +123,13 @@ const getValue: getValue = (ret, key) => ret[key]
 function getValueByPath(obj: objectOrArray, path: string | string[]) {
   return getPath(path).reduce(getValue, obj)
 }
+
+function debounce<T>(func: (data: T) => unknown, wait: number): typeof func {
+  let timeout: ReturnType<typeof setTimeout>
+  return function (data: T) {
+    clearTimeout(timeout)
+    timeout = setTimeout(() => {
+      func(data)
+    }, wait)
+  }
+}