木灵鱼儿
阅读:1814
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了。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关推荐
关于使用this.$router对象进行跳转时产生重定向错误的解决方法
vue-router升级版本后,使用$router进行跳转时,将返回一个promise对象,这其实是好事,但是除了这个,官方对报错也做了调整。这里先看一下常见一个重定向错误:为什么产生这个错误,我在谷歌查了下,有这么一个解释:这是设计使然。为什么?阅读此评论。TL;DR:假设您在页面 A,然后单击一个按钮将您带到页面 B(有点像method: goToB() { router.push('/B'); }页面 A)。但是页面 B有一个导航守卫,将您发送到页面 C。此错误是让该goToB()功能知道路由器无法完成所需任务并且用户尚未登陆的一种方式/B。这很讨厌,但信息量很大这里最大的困惑是重...

解决报错:Invalid component name layouts default.vue . Component names should conform to valid custom element name in html5 specification.
这是一个奇葩的报错,因为他居然是因为模板vue文件没有设置name导致的。也就是说,如果要解决这个问题,在提示的模板文件上设置name属性即可。layouts/default.vueexport default { name: "default", }问题解决。

解决报错:The client-side rendered virtual DOM tree is not matching server-rendered content
出现这个问题,往往是因为浏览器中的虚拟dom树和服务端dom不一致产生的,为什么会不同,举个例子:我们v-if判断客户端是否存在localstorage.getItem("token"),但实际上服务端永远不可能拿到,因为localstorage是浏览器客户端才有的东西。那么服务端渲染的dom永远没有,你浏览器上又有了,那不是就产生冲突了。于是就会报这个错,但是并不会影响页面的渲染。解决的办法就是将这个v-if放到客户端才进行运行,nuxt提供了一个自定义标签:client-only表示在这个标签内的内容,只有有客户端才会渲染运行,这样就可以让虚拟dom保持一致,且不...

ECharts按需加载
默认情况下,我们这种引用方式,是全引用的import echarts from "echarts";但是我们并没有用到echarts中所有的图表,所以,我们尽量的按需引入。let echarts = require('echarts/lib/echarts') require('echarts/lib/chart/bar') //柱状图 require('echarts/lib/chart/pie') //饼图 //下面的是需要的提示框 require('echarts/lib/component/tooltip') req...
moment 语言包按需加载
moment作为一个时间插件,使用的地方是非常广泛的,但是我们使用moment的时候,需要注意下他的语言包。默认情况下,他的语言包是全加载的,也就是有多少个预设的语言包,就加载多少个。为此,我们需要对他进行优化优化前优化打开vue.config.js文件const webpack = require('webpack'); module.exports = { //... configureWebpack: { plugins: [ // Ignore all locale files of moment.js new webpack.Ignore...

vue cli4 lodash库 按需引入
lodash这库还是为微信技术群里有人推荐的,我一开始都不知道,不过看了下,是对一些常用js方法的封装,比如深度克隆,筛选啊这些。但是一个lodash的库引用,他占用了起码有500kg的大小,在vue cli 打包后,在chunk-vendors.js文件中也占据了一些大小。这就会导致chunk-vendors这个文件变得特别的大,但是lodash里面的方法你可能只会用到一部分,并不是全部,所以我希望的是,他可以按需引入,并且不改变原来的写法的情况下。教程安装插件yarn add lodash-webpack-plugin babel-plugin-lodash --dev安装这两个...
哈哈
Google Chrome Windows 10我也遇到相同的问题。 lodash-webpack-plugin 提供了配置选项,设置shorthands: true 可以解决。