webapck 和vite 如何开启tree shaking

在 Webpack 和 Vite 中，tree shaking 是默认启用的，但你可以通过以下方式确保其有效性。

Webpack开启tree shaking

1. 使用 ES Modules：确保使用 `import` 和 `export` 语法。

在package.json 设置 type:'module'。

"type": "module",

 webpack 设置 `mode` 为 'production'，会默认开启tree shaking。

2. 配置 `optimization`

module.exports = {
     optimization: {
       usedExports: true,
     },
   };

Vite开启tree shaking

1. 使用 ES Modules：同样确保使用 `import` 和 `export`。

2. 构建时自动启用：在运行 `vite build` 时，Vite 默认会进行 tree shaking。

optimization.usedExports

`optimization.usedExports` 是 Webpack 的一个配置选项，用于启用树摇（tree shaking）功能。它会分析你的模块，识别出哪些导出的内容实际上被使用，从而在打包时排除未使用的导出。

主要功能

• 启用树摇：通过设置为 `true`，Webpack 会标识并移除未使用的导出。
• 提高打包效率：减少最终打包文件的大小，提高加载速度。

一般来说，这个选项在生产模式下是默认启用的。