vue cli4 按需加载（打包）lodash

主要是记录下我的项目经验，方便后续查看。同时也算是一种分享，帮助有需要的人。
我的项目是vue cli4生成的项目，同时没有采用TS.

方式1(全路径引用)：
在我的需要用到lodash的a.vue文件中
import cloneDeep from 'lodash/cloneDeep'
然后就可以直接用 cloneDeep(xx);

方式2(使用插件优化)：
在我的需要用到lodash的a.vue文件中
import _ from "lodash";
然后就可以直接用 _.cloneDeep(xx);

切换到你的cmd.
npm install lodash-webpack-plugin -S
npm install babel-plugin-lodash -S
然后再接下来进行配置
1.配置vue.config.js

我把核心部分粘贴出来，方便大家复制。

const LodashModuleReplacementPlugin = require("lodash-webpack-plugin");
...
chainWebpack: (config) => {
 if (process.env.NODE\_ENV === "production") {
    config.plugin("loadshReplace").use(new LodashModuleReplacementPlugin());
 }
},

2.配置babel.config.js

这个配置很简单，我就不粘贴代码了。

总结：方式1和方式2各有利弊，方式1的优点就是不用各种配置，缺点就是用什么import什么，可能写业务逻辑写的正爽的，突然要切换到文件头部去import一个没有导入的函数，略有不爽。方式2刚好相反。
看大家各自的爱好了。但是2种方式都能保证npm run build的lodash是按需打包的。小了很多

注意：如果你的项目配置了全局的lodash引用，如上方式是否可行，我就不能保证了。

new webpack.ProvidePlugin({
  _: "lodash",
}),

---

使用 lodash-es (这种方式，本人还没有来得及尝试)

tree-shaking 作为 rollup 的一个杀手级特性，能够利用 ES6 的静态引入规范，减少包的体积，避免不必要的代码引入，webpack2 也很快引入了这个特性。

要用到 tree-shaking，必然要保证引用的模块都是 ES6 规范的。lodash-es 是着具备 ES6 模块化的版本，只需要直接引入就可以。

import {isEmpty, isObject, cloneDeep} from 'lodash-es';