Webpack实现按需打包Lodash的几种方法详解

作者：望舒时间：2026-10-22 03:55:01浏览：529

本文详解在Webpack中按需打包Lodash的三种方法。首先介绍单独安装函数模块，其次讲解通过lodash/路径引用，最后重点解析结合babel-plugin-lodash与lodash-webpack-plugin的插件优化方案，帮助开发者在保留完整API的同时显著减小打包体积。

Webpack按需打包Lodash方案

前言

在进行数据操作时，Lodash 是我的得力工具，无论数据结构多么复杂，都能通过其提供的函数轻松处理。

虽然 ES6 新增了许多对象方法，足以应对简单项目，但在某些例外情况下，仍需要引用部分 Lodash 函数。完整的 Lodash 库即使经过压缩，最新版本体积也高达 71k。为了避免引入整个库导致体积膨胀，我们需要寻找更优的解决方案。

针对这一体积问题，目前已有多种可行的处理方案。

函数模块与路径引用

函数模块

Lodash 中的每个函数在 NPM 上都有对应的独立发布模块。你可以在 NPM 搜索 'lodash' 查看相关结果。

如果你仅需使用 lodash.isequal，只需安装该独立模块，并按以下方式引用即可。


var isEqual = require('lodash.isequal')
// or ES6
import isEqual from 'lodash.isequal'
isEqual([1, 2, 3], [1, 2, 3]) // true

全路径引用

在完整安装 Lodash 后，你可以按照 lodash/函数名的格式单独引入所需的特定函数模块。


var difference = require('lodash/difference')
// or ES6
import difference from 'lodash/difference'
difference([1, 2], [1, 3]) // [2]

插件优化配置

使用插件优化

在简单场景下，上述两种方式已能解决问题。

然而，当处理复杂数据对象时，往往需要在单个文件中引入多个 Lodash 函数，这意味着要在文件中编写多个 require 或 import 语句。


import remove from 'lodash/remove'
import uniq from 'lodash/uniq'
import invokeMap from 'lodash/invokeMap'
import sortBy from 'lodash/sortBy'
// more...

如果在代码关键处，因为引入一个函数而被迫去文件头部定义引用，会打乱开发思路，体验不佳。

为此，我在 Github 上搜索了 webpack 和 lodash 的组合关键词，发现排名第一的 lodash-webpack-plugin 正是为了解决这一问题而设计。

使用该方案需要安装以下模块，除前两个外，其余通常已预先安装：


$ npm i -S lodash-webpack-plugin babel-plugin-lodash babel-core babel-loader babel-preset-es2015 webpack

配置示例如下：


webpack.config.js
var LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
var webpack = require('webpack');
module.exports = {
 module: {
 loaders: [{
 loader: 'babel',
 test: /\.js$/,
 exclude: /node_modules/,
 query: {
 plugins: ['transform-runtime', 'lodash'],
 presets: ['es2015']
 }
 }]
 },
 plugins: [
 new LodashModuleReplacementPlugin,
 new webpack.optimize.OccurrenceOrderPlugin,
 new webpack.optimize.UglifyJsPlugin
 ]
}

其中 babel-plugin-lodash 的配置，即 plugins: ['lodash'] ，并不强制要求写在 loaders 中，也可以单独定义 babel 配置。


webpack.config.js
var LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
var webpack = require('webpack');
module.exports = {
 module: {
 loaders: [{
 loader: 'babel',
 test: /\.js$/,
 exclude: /node_modules/
 }]
 },
 babel: {
 presets: ['es2015'],
 plugins: ['transform-runtime', 'lodash']
 },
 plugins: [
 new LodashModuleReplacementPlugin,
 new webpack.optimize.OccurrenceOrderPlugin,
 new webpack.optimize.UglifyJsPlugin
 ]
}

或者将其放置在 .babelrc 文件中。

完成上述配置后，在每个需要使用 Lodash 函数的文件中，只需引用一次完整的 lodash，即可调用任意函数，而不会导致完整打包。


import _ from 'lodash'
_.add(1, 2) // 打包时只会引入这一个函数模块

注意：必须使用 ES2015 的模块引用方式，此方案才有效。

以上是我目前了解的几种方式，如果有朋友有更好的方案（例如只需全局引入一次），欢迎分享交流。

总结

以上就是本文的全部内容，希望这些内容能对大家的编程学习或工作有所帮助。如有疑问，欢迎留言交流，感谢支持。

作者最新文章

Docker 部署 Wiki.js 完整教程：从安装到初始化配置

2026-11-04 10:36:31

从其他平台迁移数据到 Wiki.js 的方法与注意事项

2026-11-03 23:50:05

Wiki.js 启动报错或数据库连接失败怎么排查解决

2026-11-03 09:49:52

macOS 使用 Homebrew 或 nvm 升级 Node.js 的最佳实践

2026-11-03 08:29:29

前端项目部署后如何提示用户版本更新详解

2026-11-01 02:17:48