木灵鱼儿

木灵鱼儿

阅读：1814

最后更新：2021/06/29/ 14:41:35

lodash按需加载使用unionBy打包后使用报错：t is not a function 的问题解决方案

按需加载，在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
木灵鱼儿

木灵鱼儿

发布了 716 篇文章获得点赞 1获得阅读 1814

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

one
two
three
  1. 哈哈
    哈哈
    Google Chrome Windows 10

    我也遇到相同的问题。 lodash-webpack-plugin 提供了配置选项，设置shorthands: true 可以解决。

    回复

关于作者

站点职位 博主
获得点赞 1
文章被阅读 1814

相关文章

利用发布订阅模式封装一个IntersectionObserver利用发布订阅模式封装一个IntersectionObserver
typecho 自定义分类和分类高亮处理typecho 自定义分类和分类高亮处理
ts封装一个localStorage和sessionStorage的类ts封装一个localStorage和sessionStorage的类
利用typescript实现原生css变量的主题切换功能类利用typescript实现原生css变量的主题切换功能类
typecho主题开发：基于webpack5的多页面打包项目typecho主题开发：基于webpack5的多页面打包项目