Webpack的Tree Shaking是一个用于删除代码中未被引用的未使用代码的优化技术。
它可以显著减小打包后的文件体积，提高网页加载速度。
要配置Webpack实现代码的无用代码剔除，需要进行以下几个步骤：
-
确保你的代码是使用ES6模块语法编写的，而不是CommonJS（require）语法。因为Tree Shaking只对ES6模块有效。
-
在
Webpack配置文件中，通过设置mode为production，启用Webpack的生产模式，此时Tree Shaking功能会默认开启。 -
确保你的
package.json文件中的sideEffects字段被正确配置。sideEffects字段告诉Webpack哪些文件是没有副作用的，可以进行Tree Shaking。如果你的应用是纯粹的JavaScript应用，可以将sideEffects设置为"sideEffects": false。如果你的应用使用了一些有副作用的模块（例如CSS文件），你需要将这些模块添加到sideEffects字段中。这样Webpack就不会将这些有副作用的模块进行Tree Shaking。
需要注意的是，Tree Shaking只适用于ES6模块语法，并且只能剔除未引用的代码，不能剔除被动态引用的代码（例如通过字符串拼接生成模块路径）。另外，一些特定的代码结构可能会导致Tree Shaking失效，例如使用eval、with等特殊语法。
配置完成后，运行Webpack打包构建，未被引用的代码将会被删除，从而减小文件体积。