Vue3+Vite中lodash-es安装与使用指南

在 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，在保持小体积的同时获得强大的工具函数支持。