webpack4的tree shaking问题

Question

代码压缩用的terser-webpack-plugin插件
无论是production或者是development模式都可以在打包后的bundle文件找到FuncA代码

.babelrc文件"modules": false也加了

// *utils.js文件
export function funcA() {
  return 'FuncA';
}

export function funcB() {
  return 'FuncB';
}

// *main.js文件
import { funcB } from './utils';

funcB();

// *webpack.config.js文件
module.exports = {
  // *省略亿点点配置
  optimization: {
    // 压缩代码
    minimize: true,
    usedExports: true,
    providedExports: true,
    minimizer: [
      new TerserPlugin(),
    ],
  },
};

给我的感觉就是terser插件的压缩js的效果没有作用

Answer 1

貌似应该是tree-shaking 是在babel编译代码之后进行的，但是由于babel转义之后的代码产生了副作用，所以tree-shaking无法删除，相关文章： https://juejin.cn/post/684490...

Answer 2

babel把代码转成es5的老问题了，es5因为是显性挂载在module.exports上的，所以你的函数被认为已经使用了，所以无法被tree-shaking掉。