• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

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>

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

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

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

0
  • 本文分类:vue 项目实战
  • 本文标签:vuevue clilodashlodash 按需引入
  • 流行热度:已超过 138 人围观了本文
  • 最后更新:2020年10月29日 - 11时09分14秒
  • 发布日期:2020年10月29日 - 11时09分14秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码