vue cli4 lodash库 按需引入

lodash这库还是为微信技术群里有人推荐的，我一开始都不知道，不过看了下，是对一些常用js方法的封装，比如深度克隆，筛选啊这些。

但是一个lodash的库引用，他占用了起码有500kg的大小，在vue cli 打包后，在chunk-vendors.js文件中也占据了一些大小。

这就会导致chunk-vendors这个文件变得特别的大，但是lodash里面的方法你可能只会用到一部分，并不是全部，所以我希望的是，他可以按需引入，并且不改变原来的写法的情况下。

教程

安装插件

yarn add lodash-webpack-plugin  babel-plugin-lodash  --dev

安装这两个插件。

然后去vue.config.js中配置

//按需加载lodash
const LodashModuleReplacementPlugin = require("lodash-webpack-plugin");

module.exports = {
  chainWebpack: config => {
    //按需加载lodash
    if (process.env.NODE_ENV === "production") {
      config.plugin("loadshReplace").use(new LodashModuleReplacementPlugin());
    };
  }
}

这里表示我是在打包的环境下才会按需引入的

babel.config.js配置

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

然后保存，我们再进行打包，就会发现chunk-vendors.js会比原来小一些。

然后使用的时候和往常一样，在需要调用lodash方法的vue文件里面引入

<script>
import _ from "lodash";
export default {
  methods:{
    test(){
      _.find()
    }
  }
}
</script>

打包时会自动给你按需引入的，所以，写法上不需要考虑变动，特别是用的特别多的情况下。

当然也有另一个方法，不用插件的，但是我就不是很喜欢，因为写的多了就很烦了，记不住那么多。

有需要可以自行百度找找教程。