为什么Tree Shaking没生效？按需引入后代码体积没减少

司马朱莉提问于 2026-02-16 12:44:30 阅读 20

优化

我按网上的教程把项目里所有lodash的全局引入都改成按需导入了，但打包后发现整体体积反而比之前更大？比如这样写：


import _get from 'lodash/get';
import _camelCase from 'lodash/camelCase';

function process(data) {
  const value = _get(data, 'user.name', 'default');
  return _camelCase(value);
}

我用webpack4配置了sideEffects: false，也尝试过用babel-plugin-lodash插件，但打包后的vendor.js里还是能看到整个lodash的代码块。难道按需引入需要额外配置？或者Tree Shaking对第三方库不生效？

我来解答赞 3 收藏

反馈

1 条解答

___思晨 Lv1

问题出在lodash的引入方式上，改成这样就能正确Tree Shaking了：

import get from 'lodash-es/get';

import camelCase from 'lodash-es/camelCase';



function process(data) {

  const value = get(data, 'user.name', 'default');

  return camelCase(value);

}

记住要用lodash-es这个包，它是ES Module格式，原生lodash是CommonJS的，webpack打不动。另外确认下babel-loader别把模块转成CommonJS了，presets里加个选项：

{

  test: /.js$/,

  loader: 'babel-loader',

  options: {

    presets: [

      ['@babel/preset-env', { modules: false }]

    ]

  }

}

2026-02-16 13:04