vue cli4 lodash库 按需引入
lodash这库还是为微信技术群里有人推荐的，我一开始都不知道，不过看了下，是对一些常用js方法的封装，比如深度克隆，筛选啊这些。
但是一个lodash的库引用，他占用了起码有500kg的大小，在vue cli 打包后，在chunk-vendors.js文件中也占据了一些大小。
这就会导致chunk-vendors这个文件变得特别的大，但是lodash里面的方法你可能只会用到一部分，并不是全部，所以我希望的是，他可以按需引入，并且不改变原来的写法的情况下。
教程
安装插件
shell复制代码yarn add lodash-webpack-plugin babel-plugin-lodash --dev
安装这两个插件。
然后去vue.config.js中配置
javascript复制代码//按需加载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配置
javascript复制代码module.exports = {
"plugins":["lodash"]
}然后保存，我们再进行打包，就会发现chunk-vendors.js会比原来小一些。
然后使用的时候和往常一样，在需要调用lodash方法的vue文件里面引入
javascript复制代码<script>
import _ from "lodash";
export default {
methods:{
test(){
_.find()
}
}
}
</script>打包时会自动给你按需引入的，所以，写法上不需要考虑变动，特别是用的特别多的情况下。
当然也有另一个方法，不用插件的，但是我就不是很喜欢，因为写的多了就很烦了，记不住那么多。
有需要可以自行百度找找教程。
分类：
vue 项目实战
标签：
vuevue clilodashlodash 按需引入
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可，禁止转载。
全部评论 4
Jackie
Google Chrome Windows 10木灵鱼儿
FireFox Windows 10Jackie
Google Chrome Windows 10木灵鱼儿
FireFox Windows 10