lodash库在vue中的按需引入

lodash官网：Lodash 简介 | Lodash 中文文档 | Lodash 中文网

安装：

npm i --save lodash

1.全部引入

// 方式1：引入整个lodash对象
import _ from "lodash";

// 方式2：按名称引入特定的函数
import { cloneDeep } from "lodash";

这两种方式都会引入整个 lodash 库。Lodash 含有许多函数，项目里一般只会用到其中的小部分，为了避免引入不必要的代码，lodash 提供了多种支持按需加载的方式。

2.按需引入方式一

// 只引入 debounce 模块的功能
import debounce from "lodash/debounce";

// 只引入 cloneDeep 函数
import cloneDeep from "lodash/cloneDeep";

// 一些方法无法使用上述引入时，可尝试下面这种方式引入
import { debounce} from 'lodash/function'

上面是按需引入的一种方式，假如你一个一个引入lodash方法怕麻烦，进行了全引入lodash，打包时，可以采用下面的方法引用插件，进行移除没有使用的lodash的方法。

3.按需引入方式二

安装插件lodash-webpack-plugin、babel-plugin-lodash

配合插件：lodash-webpack-plugin
npm i lodash-webpack-plugin babel-plugin-lodash

.babel.config.js

 module.exports = {
    plugins: ["lodash"],
  };

vue.config.js

const LodashModuleReplacementPlugin = require("lodash-webpack-plugin");
module.exports = {
    chainWebpack: (config) => {
      config.plugin("loadshReplace").use(new LodashModuleReplacementPlugin());
    },
  };

插件 babel-plugin-lodash 和 lodash-webpack-plugin 能够在打包时去掉不必要的 lodash 代码，减小产物体积。