lodash 在 vue3+vite 中按需加载

问题描述：lodash 全量加载，它打包后文件较大 100kb 左右

问题现象：项目中使用了大约十个 lodash 方法，但由于全局加载 lodash 而导致打包后，单 lodash 文件就 100kb 左右，因而需要优化

import _ from 'lodash'

优化方式：按需加载，按需加载有三种方式，

1.第一种是 lodash-webpack-plugin + babel-plugin-lodash

通过插件在打包时对 lodash 方法实现按需加载但此方法需要下载较多插件

yarn add @babel/preset-env webpack webpack-cli @babel/core babel-loader babel-plugin-lodash lodash-webpack-plugin -D

如上因而舍弃该方法

2.第二种：

import cloneDeep from 'lodash/cloneDeep'import debounce from 'lodash/debounce'

这种方式有个问题即无法 import 一次使用多个方法因而使用起来不是很方便

第三种：

import {cloneDeep, debounce} from 'lodash-es'

这种方式即删除 lodash 包下载 lodash-es 包，可实现 import 一次使用多个方法，lodash-es 包只支持 es6 语法，vue3+vite 项目一般情况下同样只支持 es6 语法，因而刚刚好可用该方法，同时注意使用了按需加载就无法再用链式调用了即_.chain 方法，否则按需加载将失去意义。

当然我们也可以在 main.js 中引入按需加载的 lodash 文件如下：

import { map, sumBy, debounce, throttle, sum, cloneDeep, groupBy, find } from 'lodash-es'
export default function(app) {    const obj = {        map, sumBy, debounce, throttle, sum, cloneDeep, groupBy, find    }    app.provide('_', obj)    app.config.globalProperties._ = obj}

注入后只需要在对应组件中使用 proxy._.XXX 即可使用 lodash 中方法了

总结：按需加载方式多种，适合自己的才是最好的