在 Vue 3 + Vite 項目中安裝和使用 lodash-es 的詳細指南如下：

一、為什么選擇 lodash-es？

• ES 模塊支持：lodash-es 以原生 ES 模塊格式發布，支持現代構建工具的 Tree Shaking

• 按需加載：只引入需要的函數，顯著減小打包體積

• 完整功能：提供與 lodash 相同的實用函數

二、安裝步驟

bash

復制

下載

npm install lodash-es
# 或
yarn add lodash-es
# 或
pnpm add lodash-es

三、推薦使用方式：按需導入（最佳實踐）

在組件中只導入需要的函數：

vue

復制

下載

<template><div><input @input="handleInput" placeholder="輸入關鍵詞"/><p>去抖結果：{{ debouncedText }}</p><p>數組交集：{{ intersectionResult }}</p></div>
</template><script setup>
import { ref } from 'vue'
// 按需導入具體函數（關鍵步驟！）
import { debounce, intersection } from 'lodash-es'const inputText = ref('')
const debouncedText = ref('')
const array1 = [1, 2, 3]
const array2 = [2, 3, 4]// 使用 lodash-es 的 debounce
const handleInput = debounce((e) => {debouncedText.value = e.target.value
}, 500)// 使用 lodash-es 的 intersection
const intersectionResult = intersection(array1, array2) // [2, 3]
</script>

四、全局導入（不推薦）

javascript

復制

下載

// vite.config.js
import { defineConfig } from 'vite'export default defineConfig({optimizeDeps: {include: ['lodash-es'] // 添加預構建依賴}
})

javascript

復制

下載

// main.js
import * as _ from 'lodash-es'// 掛載到 Vue 全局屬性
app.config.globalProperties.$_ = _

vue

復制

下載

<!-- 組件中使用 -->
<script setup>
import { getCurrentInstance } from 'vue'const { proxy } = getCurrentInstance()
proxy.$_.debounce(/* ... */)
</script>

五、常用函數示例

1. 防抖處理

javascript

復制

下載

import { debounce } from 'lodash-es'window.addEventListener('resize', debounce(() => {console.log('窗口調整結束')
}, 300))

1. 數組操作

javascript

復制

下載

import { chunk, difference } from 'lodash-es'chunk(['a', 'b', 'c', 'd'], 2) // [['a','b'], ['c','d']]
difference([1, 2, 3], [2, 3])  // [1]

1. 對象操作

javascript

復制

下載

import { cloneDeep, merge } from 'lodash-es'const obj = { a: { b: 1 } }
const deepCopy = cloneDeep(obj)merge({ a: 1 }, { b: 2 }) // { a: 1, b: 2 }

1. 實用工具

javascript

復制

下載

import { random, sampleSize } from 'lodash-es'random(5, 10)           // 5-10之間的隨機數
sampleSize([1,2,3,4], 2) // 隨機選取2個元素

六、為什么按需導入更好？

1. Tree Shaking 優化：

   javascript

   復制

   下載

   // 打包時只會包含 debounce 及其依賴
   import { debounce } from 'lodash-es' // 會包含整個lodash庫 (約70KB)
   import _ from 'lodash' 

2. 體積對比：

   • 完整 lodash-es：≈70KB

   • 按需引入單個函數：通常 < 1KB

七、解決 TypeScript 類型提示

1. 安裝類型聲明：

bash

復制

下載

npm install @types/lodash-es -D

1. 在 tsconfig.json 中添加：

json

復制

下載

{"compilerOptions": {"types": ["lodash-es"]}
}

八、常見問題解決

1. 構建警告 "Circular dependency"：
   在 vite.config.js 中添加：

   javascript

   復制

   下載

   export default defineConfig({build: {commonjsOptions: {exclude: ['lodash-es']}}
   })

2. 瀏覽器兼容性：
   在?vite.config.js?中添加官方插件：

   javascript

   復制

   下載

   import legacy from '@vitejs/plugin-legacy'export default defineConfig({plugins: [legacy({targets: ['defaults', 'not IE 11']})]
   })

九、替代方案（輕量選擇）

如果只需要少量函數，可考慮單獨安裝：

bash

復制

下載

npm install lodash.debounce lodash.clonedeep

使用：

javascript

復制

下載

import debounce from 'lodash.debounce'
import cloneDeep from 'lodash.clonedeep'

最佳實踐總結

1. 始終按需導入：import { func } from 'lodash-es'

2. 避免全局導入：防止打包體積過大

3. 配合 Vite 的 Tree Shaking：現代構建工具會自動優化

4. 復雜操作優先使用 lodash：如深度克隆、防抖節流等

按照這些步驟，您可以高效地在 Vue 3 + Vite 項目中使用 lodash-es，在保持小體積的同時獲得強大的工具函數支持。