为什么用lodash-es按需导入后Tree Shaking没减少打包体积？

UE丶熙然提问于 2026-02-07 13:05:36 阅读 21

优化

我在项目里改用lodash-es想通过Tree Shaking减小体积，但打包后发现整个lodash都进去了…

按教程这样导入的：


import { map, each } from 'lodash-es';

function process(data) {
  const result = map(data, item => item * 2);
  each(result, (value, index) => console.log(index, value));
  return result;
}

检查了webpack配置启用了ES6模块化，也没发现sideEffects相关设置。难道不是应该只打包map和each吗？是不是我哪里理解错了？

我来解答赞 5 收藏

反馈

2 条解答

程序员钰岩 Lv1

Tree Shaking 没生效是因为你用了命名导入但打包工具没做静态分析优化。改用直接引入函数路径：

import map from 'lodash-es/map';

import each from 'lodash-es/each';

就这样。

2026-02-09 13:10

文雅 Lv1

问题应该出在你用了具名导入但是打包工具没做tree-shaking优化。lodash-es本身是支持按需导入的，但像import { map, each } from 'lodash-es'这种写法其实在webpack里会被处理成整个模块引入，不会自动剪掉不用的部分。

正确的做法是用按路径导入，比如：

import map from 'lodash-es/map';

import each from 'lodash-es/each';

这样打包的时候webpack才会真正只把需要的函数引入进去。你可以试试改成这样再打包看看体积变化。

另外检查一下你的package.json有没有设置"sideEffects": false，这个设置会影响tree-shaking的效果。如果用了第三方插件处理lodash（比如lodash-webpack-plugin），那配置方式又不一样了。先试试上面的修改，应该能解决你现在的问题。

2026-02-07 13:06