按需加载,在gzip面前根本不值一提,当然,该优化还是要优化,所以在使用了lodash-webpack-plugin插件后,在使用个别方法后就会出现问题,比如:unionBy;

原因

按需加载的插件,它的按需就是将你调用的方法单独提取出来,但是,如果提取的方法里面还用了其他方法,他可能无法识别,导致方法缺失,所以就会报错。

报错代码

<script>
import _ from "lodash";
export default {
  methods: {
    test(arr){
       return _.unionBy(arr, "key");
    }
  }
}
</script>

大概是这么一个写法,导致问题。

解决方法

<script>
import _ from "lodash";
export default {
  methods: {
    test(arr){
       return _.unionBy(arr, (data)=>data["key"]);
    }
  }
}
</script>

通过函数的方式返回,这样可以跳过unionBy内部调用lodash其他的方法。

个人测试没有问题,使用正常了。

如果实在不行,你可以放弃使用按需加载,毕竟这个库也不是很大,gzip一下就几十k了。

分类: vue 项目实战 标签: lodash按需加载报错unionBy

评论

全部评论 1

  1. 哈哈
    哈哈
    Google Chrome Windows 10
    我也遇到相同的问题。 lodash-webpack-plugin 提供了配置选项,设置shorthands: true 可以解决。

目录