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