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

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

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

教程

安装插件

shell
复制代码
yarn add lodash-webpack-plugin  babel-plugin-lodash  --dev

安装这两个插件。

然后去vue.config.js中配置

javascript
复制代码
//按需加载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配置

javascript
复制代码
module.exports = {
  "plugins":["lodash"]
}

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

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

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

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

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

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

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。