在现代Web开发中，JavaScript打包工具如Webpack扮演着至关重要的角色。在Webpack中，tree-shaking是一项强大的功能，它可以帮助我们减小打包后的文件大小，提高Web应用的性能。

Webpack5 配置

jsx
// webpack.config.js
// webpack4、5均使用该配置

// tree-shanking usedExports 仅对剔除的代码打上标记, minimize在压缩代码的同时，对打上标记的代码进行清除
// 真正的删除在terser插件环节

const path = require('path')

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  devtool: 'source-map', // devtool默认为inline，也就是默认将sourceMap打进bundle，影响测试查看，
  output: {
    filename: 'bundle.js',
    path: path.resolve('./', 'dist'),
  },
  optimization: {
    usedExports: true,
    minimize: true,
  },
}

package.json里面sideEffects字段："sideEffects":false，意思为所有文件都没有副作用。

部分场景无法tree-shanking

通过export default 导出

jsx
// index.js
import x from './math.js'
x.cube(10)

// math.js
function square(x) {
  return x * x;
}

function cube(x) {
  return x * x * x;
}

export default {
  square,
  cube,
}

//result：square 和 cube 都会被打进bundle

webpack4 和webpack5的tree-shanking的区别

1.很多文章都说webpack5的生产模式会自动启用tree-shanking和代码压缩

其实webpack4的生成模式下也会自动启用tree-shanking和代码压缩，

所以那些试都不试的文章搬运工真的很烦人~

2.sideEffects均可以生效

3.详细区分查看 具体区别