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>

五、常用函数示例

防抖处理

javascript

复制

下载

复制代码

import { debounce } from 'lodash-es'

window.addEventListener('resize', debounce(() => {
  console.log('窗口调整结束')
}, 300))

数组操作

javascript

复制

下载

复制代码

import { chunk, difference } from 'lodash-es'

chunk(['a', 'b', 'c', 'd'], 2) // [['a','b'], ['c','d']]
difference([1, 2, 3], [2, 3])  // [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 }

实用工具

javascript

复制

下载

复制代码

import { random, sampleSize } from 'lodash-es'

random(5, 10)           // 5-10之间的随机数
sampleSize([1,2,3,4], 2) // 随机选取2个元素

六、为什么按需导入更好？

Tree Shaking 优化：

javascript

复制

下载

复制代码

// 打包时只会包含 debounce 及其依赖
import { debounce } from 'lodash-es' 

// 会包含整个lodash库 (约70KB)
import _ from 'lodash'

体积对比：
- 完整 lodash-es：≈70KB
- 按需引入单个函数：通常 < 1KB

七、解决 TypeScript 类型提示

安装类型声明：

bash

复制

下载

复制代码

npm install @types/lodash-es -D

在 tsconfig.json 中添加：

json

复制

下载

复制代码

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

八、常见问题解决

构建警告 "Circular dependency" ：

在 vite.config.js 中添加：

javascript

复制

下载

复制代码

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

浏览器兼容性 ：

在 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'

最佳实践总结

始终按需导入 ：import { func } from 'lodash-es'
避免全局导入：防止打包体积过大
配合 Vite 的 Tree Shaking：现代构建工具会自动优化
复杂操作优先使用 lodash：如深度克隆、防抖节流等

按照这些步骤，您可以高效地在 Vue 3 + Vite 项目中使用 lodash-es，在保持小体积的同时获得强大的工具函数支持。