为什么我的React组件无法通过Tree Shaking移除未使用的导入？

一书希提问于 2026-02-02 18:52:28 阅读 64

优化

我在开发React组件时遇到了奇怪的问题。我按照文档在组件里只用了lodash的_.each方法，但打包后发现整个lodash库都被包含了。明明代码里没用到其他函数啊！

我尝试过这样写：

import React from 'react';
import * as _ from 'lodash';

function ItemList({ items }) {
  _.each(items, (item, index) => (
    <div key={index}>{item}</div>
  ));
  return <div>Items loaded</div>;
}

但打包分析显示整个lodash都被打包进去了。明明配置了webpack的sideEffects: false，为什么Tree Shaking没生效？是不是导入方式有问题？或者需要给lodash加特殊标记？

我来解答赞 6 收藏

反馈

2 条解答

FSD-采涵 Lv1

改一下就行，你现在的导入方式会让webpack把整个lodash都引入进来，根本没法tree shaking。* as _ 这种写法等于告诉打包工具“我可能要用里面所有东西”。

用这个：

import React from 'react';

import each from 'lodash/each';



function ItemList({ items }) {

  each(items, (item, index) => (

    {item}


  ));

  return Items loaded
;

}

这样只导入each函数，webpack就能确定其他lodash代码没被引用，打包时直接干掉。别忘了确认babel-plugin-lodash有没有配，不然按需引入可能还是抽风。

另外说一句，lodash现在真不如直接用原生数组方法，each这种玩意儿换成items.forEach不香吗？又不是要兼容IE6。

2026-02-10 19:07

彬丽🍀 Lv1

问题出在你的导入方式上。你用了 import * as _ from 'lodash'; 这种写法，它会把整个 lodash 库都导入进来，而不是按需加载单个方法。这就是为什么 Tree Shaking 失效的原因。

正确的做法是按需导入你需要的函数。比如你只用到 _.each，可以这样写：

import React from 'react';

import each from 'lodash/each';



function ItemList({ items }) {

  each(items, (item, index) => (

    <div key={index}>{item}</div>

  ));

  return <div>Items loaded</div>;

}



export default ItemList;

另外提醒一下，虽然按需导入能解决这个问题，但也要检查你的 Webpack 配置。确保 babel-loader 没有对代码进行不必要的转换，破坏 Tree Shaking 的效果。如果用的是 Babel，记得安装 babel-plugin-lodash 插件来优化 lodash 的导入。

最后，sideEffects: false 确实需要配置，但前提是你的项目中所有模块都要支持 Tree Shaking。如果某个依赖不支持，还是会导致整个库被包含进去。所以要做校验，确保所有依赖都兼容这个功能。

顺便吐槽一句，lodash 全量导入真是性能杀手，太容易踩坑了。

2026-02-02 19:02