木灵鱼儿

木灵鱼儿

阅读：2405

最后更新：2020/10/29/ 11:09:14

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>

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

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

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

文章分类 vue 项目实战
文章标签 vuevue clilodashlodash 按需引入
木灵鱼儿

木灵鱼儿

发布了 559 篇文章获得点赞 23获得阅读 2405

版权申明

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

one
two
three
  1. Jackie
    Jackie
    Google Chrome Windows 10

    import _ from "lodash" 这样引入的_ 是undefined的 去掉babel.config.js的"plugins":["lodash"]就可以 请问这样是什么问题呢？

    回复
    1. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 10
      @Jackie

      按需引入后，你必须直接调用方法才不会是undefined，比如直接深度拷贝 _.copyDeep()，插件会自动转换，直接console输出_就会undefined

      回复
      1. Jackie
        Jackie
        Google Chrome Windows 10
        @木灵鱼儿

        确实是这样的 主要是我想import之后把它挂载到Vue.prototype.$lodash=_ 使用 看来不能这样子用 感谢回复[妙啊]

        回复
        1. 木灵鱼儿
          木灵鱼儿
          FireFox Windows 10
          @Jackie

          webpack会自动转换，所以他会删除你import的完整引入

          回复

关于作者

站点职位 博主
获得点赞 23
文章被阅读 2405

相关文章

利用JSON过滤对象和数组中指定的key属性利用JSON过滤对象和数组中指定的key属性
使用vue.draggable拖拽组件遇到的一些问题使用vue.draggable拖拽组件遇到的一些问题
关于 element table多选里面实现单选的偷懒做法关于 element table多选里面实现单选的偷懒做法
深拷贝+循环引用深拷贝+循环引用
关于element el-input 输入的值需要转number的问题关于element el-input 输入的值需要转number的问题

目录树