vue项目按需引入lodash库

sᴜᴘᴇʀ菜酱

已于 2023-02-27 10:01:50 修改

阅读量793

点赞数

分类专栏：前端优化文章标签： vue.js javascript 前端 Powered by 金山文档

于 2023-02-26 23:24:06 首次发布

本文链接：https://blog.csdn.net/SuperJane_123/article/details/129233325

版权

前端优化专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章介绍了如何在JavaScript项目中按需引入lodash库以减少体积。通过安装lodash-webpack-plugin和babel-plugin-lodash，然后在babel.config.js和vue.config.js中配置，可以实现按需引入。例如，使用`importuniqByfromlodash/uniqBy;`代替全局引入，并注意按需引入后回调函数的使用差异。

摘要由CSDN通过智能技术生成

lodash是一个很强大的javascript 工具库，但是实际项目中可能不会用到里面所有的方法，如果全部引入就会显的很重，为了吃几条鱼，就承包了整个鱼塘。所以可以根据项目需求进行按需引入。

1.安装以下插件

npm i -S lodash-webpack-plugin babel-plugin-lodash

2.在babel.config.js 注册插件

// babel.coonfig.js文件
module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    // 注册使用一下
    'lodash'
  ]
};

3.在vue.config.js文件添加以下代码

// vue.config.js
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
module.exports = {
//....其他配置代码
  chainWebpack(config) {
    config.plugin('loadshReplace').use(new LodashModuleReplacementPlugin());
  }
};

4.使用方式

// let lodash = require('lodash'); // 这是没有按需引入的写法
import _uniqBy from 'lodash/uniqBy'; // 按需引入后的方法

// 这里有个参数要注意：
lodash.uniqBy(selArr,'id'); // 全部引入时第二个参数是字符串
_uniqBy(selArr, (data) => data['id']); // 按需引入后第二个参数接受的是回调函数。