H5W3
当前位置:H5W3 > 问答 > 正文

webpack4的tree shaking问题

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

// *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的效果没有作用

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

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

回答

本文地址:H5W3 » webpack4的tree shaking问题

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址