Lodash优化方案

lodash作为一个JavaScript 实用工具库，经常在前端项目中使用，但是常用的只有其中的一二十个方法，但是在打包的时候如果没有配置优化的话会进行全量打包，造成产出文件大，下面探讨一下优化方案

// 使用包版本

"lodash": "^4.17.21",
"lodash-es": "^4.17.21"


"@babel/core": "^7.24.5",
"@babel/preset-env": "^7.24.5",
"babel-loader": "^9.1.3",
"babel-plugin-lodash": "^3.3.4",
"lodash-webpack-plugin": "^0.11.6",
"webpack": "^5.91.0"

前置基础：先编写一个简单的webpack项目

app.js

console.log('app');

import _ from 'lodash';

const users = [
    { 'user': 'barney', 'age': 36, 'active': true },
    { 'user': 'fred', 'age': 40, 'active': false },
    { 'user': 'pebbles', 'age': 1, 'active': true }
]

const cloneUser = _.cloneDeep(users);

console.log(users);
console.log(cloneUser);

webpack.config.js

const path = require('node:path');
const webpack = require('webpack');

module.exports = {
    mode: 'production',

    entry: path.join(__dirname, 'app.js'),

    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },

    devtool: false
};

直接webpack build打包显示bundle.js文件大小为69 kb，下面给予这个基础进行优化

优化方案

1、按需加载(不推荐)

产出文件大小（16.9 kb）

推荐指数 🈚️

原因：书写代码多，对于文件需要引入多个方法不友好

import cloneDeep from 'lodash/cloneDeep';

---

2、使用官方提供的插件(babel-lodash-plugin + lodash-webpack-plugin)

产出文件大小（6.32 kb）

推荐指数 ⭐️⭐️⭐️

pnpm i babel-loader @babel/core @babel/preset-env babel-plugin-lodash lodash-webpack-plugin -D

// webpack.config.js 添加如下配置

    module: {
        rules: [
            {
                test: /\.js$/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: ['lodash']
                    }
                }],
                exclude: /node_modules/
            }]
    },
    plugins: [
        new LodashModuleReplacementPlugin({
            collections: true,
            paths: true
        })
    ]

---

3、使用lodash-es

产出文件大小（12 kb）

推荐指数 ⭐️⭐️⭐️⭐️

原因：lodash-es使用 webpack的Tree Shaking进行优化

备注：方法导入需要使用按需导入，不然会用不上 webpack的Tree Shaking特性

pnpm i lodash-es

import {cloneDeep} from 'lodash-es';

---

4、终极方案lodash-es + plugin

产出文件大小（3.85 kb）

推荐指数 ⭐️⭐️⭐️⭐️⭐️