木灵鱼儿

木灵鱼儿

阅读:1799

最后更新: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>

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

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

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

版权申明

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

关于作者

站点职位 博主
获得点赞 0
文章被阅读 1799

相关文章

目录树