perf: 🧰 lodash bundle size optimization #137 [ dev ]

perf:  🧰 lodash bundle size optimization.

Author: inhiblab

packages/hooks/docs/.vitepress/theme/home/HomeTeam.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { contributors, coreTeamMembers } from '../../../contributors'
+  import { coreTeamMembers } from '../../../contributors'
   import TeamMember from './TeamMember.vue'
 </script>
 
@@ -23,6 +23,8 @@
 
   h2 {
     text-align: center;
+    font-weight: 600;
+    transform: scale(0.6);
     color: var(--vp-font-color);
   }
 

packages/hooks/docs/.vitepress/theme/home/TeamMember.vue

@@ -25,12 +25,16 @@
       :alt="`${data.name}'s avatar`"
     />
     <div class="name">
-      {{ data.name }}
+      <a v-if="data.github" :href="`https://github.com/${data.github}`" target="_blank">{{
+        data.name
+      }}</a>
+      <div v-else>{{ data.name }}</div>
     </div>
     <div class="description" v-html="data.description" />
 
     <div flex="~ inline gap-2" py2 text-2xl>
       <a
+        v-if="data.github"
         class="i-carbon-logo-github inline-block text-current op30 hover:op100 mya transition duration-200"
         :href="`https://github.com/${data.github}`"
         target="_blank"
@@ -70,7 +74,7 @@
         <div class="code">
           <img class="icon" :src="funcIcon" alt="" />
           <div class="code-container">
-            <a v-for="f of data.functions" :key="f" :href="`/${f}`" target="_blank">
+            <a v-for="f of data.functions" :key="f" :href="`/${f}/`" target="_blank">
               <code>{{ f }}</code>
             </a>
           </div>
@@ -101,10 +105,14 @@
     min-width: 4.75rem;
     border-radius: 4.75rem;
   }
+  .name {
+    cursor: pointer;
+  }
   .name,
   .description {
     margin-top: 16px;
     zoom: 0.85;
+    height: 60px;
   }
   .description {
     color: var(--vp-font-color);

packages/hooks/docs/contributors.ts

@@ -33,15 +33,22 @@ const coreTeamMembers: CoreTeam[] = [
     github: 'NelsonYong',
     twitter: 'Yong_Git',
     sponsors: true,
-    description: 'vue-hooks-plus 作者',
+    description: "VueHooks Plus's Author",
     packages: ['vue-hooks-plus'],
   },
   {
     avatar: contributorsAvatars.hongaah,
     name: 'Hongaah',
     github: 'hongaah',
-    description: '技术达人',
-    functions: ['useFetch'],
+    description: '',
+    functions: ['useSetState', 'useWebSocket'],
+  },
+  {
+    avatar: contributorsAvatars.Noobbbbbbb,
+    name: 'Noobbbbbbb',
+    github: 'Noobbbbbbb',
+    description: '',
+    functions: ['useFullscreen'],
   },
 ]
 // .sort(

packages/hooks/src/useAsyncOrder/demo/demo.vue

@@ -8,66 +8,66 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
-import { useAsyncOrder } from 'vue-hooks-plus'
+  import { ref } from 'vue'
+  import { useAsyncOrder } from 'vue-hooks-plus'
 
-const error = ref<number>(0)
-const list = ref<string[]>([])
+  const error = ref<number>(0)
+  const list = ref<string[]>([])
 
-function getUsername(): Promise<string> {
-  return new Promise((resolve, reject) => {
-    setTimeout(() => {
-      resolve('No.1')
-    }, 3000)
-  })
-}
+  function getUsername(): Promise<string> {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        resolve('No.1')
+      }, 3000)
+    })
+  }
 
-function getUsername2(): Promise<string> {
-  return new Promise((resolve, reject) => {
-    setTimeout(() => {
-      resolve('No.2')
-    }, 2000)
-  })
-}
+  function getUsername2(): Promise<string> {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        resolve('No.2')
+      }, 2000)
+    })
+  }
 
-function getUsername3(): Promise<string> {
-  return new Promise((resolve, reject) => {
-    setTimeout(() => {
-      resolve('No.3')
-    }, 2000)
-  })
-}
+  function getUsername3(): Promise<string> {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        resolve('No.3')
+      }, 2000)
+    })
+  }
 
-useAsyncOrder({
-  task: [
-    resolve => {
-      getUsername().then(res => {
-        resolve?.(res)
-      })
-    },
-    resolve => {
-      getUsername2().then(res => {
-        resolve?.(res)
-      })
-    },
-    (_, reject) => {
-      getUsername2().then(() => {
-        reject?.({ err: 'error' })
-      })
+  useAsyncOrder({
+    task: [
+      resolve => {
+        getUsername().then(res => {
+          resolve?.(res)
+        })
+      },
+      resolve => {
+        getUsername2().then(res => {
+          resolve?.(res)
+        })
+      },
+      (_, reject) => {
+        getUsername2().then(() => {
+          reject?.({ err: 'error' })
+        })
+      },
+      (_, reject) => {
+        getUsername3().then(() => {
+          reject?.({ error: 'error' })
+        })
+      },
+    ],
+    option: {
+      onError: err => {
+        error.value += 1
+      },
+      onSuccess: res => {
+        list.value.push(res as string)
+      },
     },
-    (_, reject) => {
-      getUsername3().then(() => {
-        reject?.({ error: 'error' })
-      })
-    },
-  ],
-  option: {
-    onError: err => {
-      error.value += 1
-    },
-    onSuccess: res => {
-      list.value.push(res as string)
-    },
-  },
-})
+  })
 </script>

packages/hooks/src/useAsyncOrder/index.ts

@@ -50,7 +50,6 @@ export default function useAsyncOrder({ task, option }: UseAsyncOrderType) {
     }
   }
   const runTask = () => {
-    // eslint-disable-next-line @typescript-eslint/no-extra-semi
     Array(...task.keys())?.reduce((promise, index) => {
       const promise_ = promise.then((res: any) => {
         if (!res?.error) {

packages/hooks/src/useEventEmitter/event.ts

@@ -1,4 +1,4 @@
-import _ from 'lodash'
+import cloneDeep from 'lodash/cloneDeep'
 import { ref, watchEffect } from 'vue'
 
 type SubscriptionParams<T = any> = {
@@ -52,13 +52,13 @@ class EventEmitter<T> {
       const subscriptionValuesCallback = this.subscriptions.get(event)
       subscriptionValuesCallback?.forEach(callback => {
         callback?.({
-          params: _.cloneDeep(args) as any,
+          params: cloneDeep(args) as any,
           event,
         })
       })
 
       this.emitEffectCache.set(event, {
-        params: _.cloneDeep(args) as any,
+        params: cloneDeep(args) as any,
         event,
       })
     } else throw new TypeError('event must be string or number !')

packages/hooks/src/useKeyPress/index.ts

@@ -1,7 +1,8 @@
 import { ref } from 'vue'
-import { isFunction, isNumber, isString } from 'lodash'
+// import { isFunction, isNumber, isString } from 'lodash'
 import { BasicTarget, getTargetElement } from '../utils/domTarget'
 import useDeepCompareEffectWithTarget from '../utils/useDeepCompareWithTarget'
+import { isNumber, isFunction, isString } from '../utils'
 
 export type UseKeyPressKeyPredicate = (event: KeyboardEvent) => boolean
 export type UseKeyPressKeyType = number | string

packages/hooks/src/useRequest/plugins/useDebouncePlugin.ts

@@ -14,13 +14,13 @@ const useDebouncePlugin: UseRequestPlugin<unknown, unknown[]> = (
     const debounceTrailing_ = unref(debounceTrailing)
     const debounceMaxWait_ = unref(debounceMaxWait)
     if (debounceLeading_ !== undefined) {
-      ret.leading =debounceLeading_;
+      ret.leading = debounceLeading_;
     }
     if (debounceTrailing_ !== undefined) {
       ret.trailing = debounceTrailing_
     }
     if (debounceMaxWait_ !== undefined) {
-      ret.maxWait =debounceMaxWait_;
+      ret.maxWait = debounceMaxWait_;
     }
     return ret;
   });

packages/use-worker/vite.config.ts

@@ -21,7 +21,7 @@ export default defineConfig({
     },
     chunkSizeWarningLimit: 1000,
     rollupOptions: {
-      external: ['vue', 'lodash/isEqual'],
+      external: ['vue'],
       output: {
         globals: {
           vue: 'Vue',