React项目用lodash-es为啥Tree Shaking没效果？

梓熙提问于 2026-02-01 03:40:27 阅读 73

优化

大家好，我在React项目里改用lodash-es做Tree Shaking优化，但打包后发现整个lodash都被引入了。比如这样写：


import _ from 'lodash-es';

const ItemList = ({ items }) => (
  <ul>
    {_.map(items, item => (
      <li key={item.id}>{item.name}</li>
    ))}
  </ul>
);

按说应该只打包map方法，但看bundle分析整个lodash都进去了。试过改成解构导入：


import { map } from 'lodash-es';

还是没变化，这是哪里出问题了？项目用create-react-app脚手架，没 ejected过…

我来解答赞 22 收藏

反馈

1 条解答

诸葛柯佳 Lv1

问题出在 create-react-app 的默认配置上，它对 tree shaking 的支持有点坑。复制这个：

// 改成这种写法

import map from 'lodash-es/map';



const ItemList = ({ items }) => (

  <ul>

    {map(items, item => (

      <li key={item.id}>{item.name}</li>

    ))}

  </ul>

);

关键是 import 的方式要精确到具体方法，不能用大括号解构。另外，create-react-app 默认的生产环境打包可能没完全启用 tree shaking，记得加个环境变量：

GENERATE_SOURCEMAP=false react-scripts build

这样再打包看看，应该就只留下用到的 map 方法了。如果还不行，可能是其他地方又偷偷引用了整个 lodash，去找找看有没有 import _ from 'lodash-es' 这种写法。

2026-02-01 04:00